title: Scaling image using CSS only if the image is wider than the page
body: <p>I'm putting together an "online help" system, which will display HTML content in a fairly narrow window. I'd like to display images in this window, but have them scaled to fit the width. However, I only want to horizontally scale the image down if the image is wider than the page - in other words, I never want to <em>stretch</em> the image to fit, only shrink it.</p>
  
  <p>I've tried</p>
  
  <pre><code>.img {width: 100%; height: auto;} 
  </code></pre>
  
  <p>... which just scales every image to the page width (i.e. stretches as well as shrinks)</p>
  
  <pre><code>.img {max-width: 100%; height: auto}
  </code></pre>
  
  <p>... which doesn't appear to do anything.</p>
  
  <p>Is there any (CSS-only - I'm afraid jQuery isn't an option) way to achieve this?</p>