title: Responsive Images won't Scale with Firefox as screen size is adjusted. Works in other Browsers
body: <p>I'm new to responsive images but have figured out how to get my images to scale in Safari, Opera, and Chrome (don't know about IE) with the following CSS:</p>
  
  <pre><code>img {   
    max-width: 100%;   
    width: auto;   
    height: auto; 
  }
  </code></pre>
  
  <p>As the screen size is changed, the image scales. In Firefox, the image doesn't scale, unless I change width:auto to width:100%;  Then Safari scrunches up the image to nothing upon load or reload; although, clearing cash makes it full size. I'm working on Drupal with the Zen 7.5-dev responsive theme. And I'm keeping my css files in SASS, but this is probably just a CSS issue. Maybe I've missed something on the HTML 5 or CSS3 side of things.</p>
  
  <p>Anyway, I got things to work by overriding the image width a Firefox specific directive like this:</p>
  
  <pre><code>/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
  @-moz-document url-prefix() {  
    img {   
      width: 100%;   
    }
  }
  </code></pre>
  
  <p>I don't think I should have to do this, and googling doesn't seem to come across this issue.</p>