title: Allowing images to shrink, but not stretch
body: <p>I have a site with 4,000+ pages and 10 or more jpeg images per page, of varying sizes.  I'm trying to make the site more mobile friendly.  To that end, i want to make it possible for the images to shrink to fit on smaller screens.  I know that i can do something like this to signal that the images can shrink:</p>
  
  <pre><code>img.bodyImg
  {
   width: 100%;
   max-width: 357px;
   height: auto;
  }
  </code></pre>
  
  <p>But what if not all images have a width of 357 (or whatever), and i don't want smaller images stretched beyond their true dimensions?  And just to make things more fun, what if the images tags don't have height and width attributes specified?</p>
  
  <p>My goal is to find a solution that doesn't require me to adjust tens of thousands of image calls manually, but i can do a search and replace.  Images are currently wrapped in a div container and have a class, like so:</p>
  
  <pre><code>&lt;div class="imgDiv"&gt;&lt;img class="bodyImg" src="http://www.example.com/image.jpg"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm also open to the possibility that i'm going about this in the wrong way entirely.</p>