title: HTML automatic image resize using pixel and percent constraints
body: <p>How can I add an image to an HTML page using the following constraints:</p>
  
  <ul>
  <li>No upscaling allowed ( if the picture width is 400 pixels I don't want to resize it to 600).</li>
  <li>The image should be downscaled if the containing element is smaller than the image.</li>
  <li>Keep aspect ratio.</li>
  </ul>
  
  <p>For instance I have an image (400x300). If the containing element is 600 pixels wide I'd like to show the image at 400x300. If the containing element is 200 pixels wide ( for instance it's a mobile browser ) I'd like to show the image at 200x150.</p>
  
  <p>I'm looking for a pure CSS solution (if it's possible) without hard wiring the image size.</p>