title: Responsive images with <picture> and <source> in ReactJS
body: <p>I am trying to achieve HTML-"art direction" (displaying different images for different viewport widths) in React. This is the JSX:</p>
  
  <pre><code>import LogoImg from "../../abstracts/media/logo-large.svg";
  import LogoImgMedium from "../../abstracts/media/logo-medium.svg";
  
  &lt;picture&gt;
     &lt;source srcSet={`${LogoImgMedium} 1x, ${LogoImg} 2x`} media="(max-width: 37.5em)" /&gt;
     &lt;img 
        className="logo__apple" 
        srcSet={`${LogoImgMedium} 1x, ${LogoImg} 2x`} 
        alt="Full Logo"
        src={LogoImgMedium} /&gt;
   &lt;/picture&gt;
  </code></pre>
  
  <p>The breakpoint defined in the <code>media</code> attribute does not seem to work. Do you guys know why? I have tried to specify it with px, rem and em.</p>
  
  <p>Thanks.</p>