How to limit image width without stretching the image

I am trying to write an img tag for images that are different sizes (in the image file). For images that are larger than the container, I want to scale the images down to width: 100%. However, I down want the images that are smaller than the container to scale up; I want them to be rendered in their natural size when viewed in a larger window.

Here’s what I’ve tried:

• 
  

  <img src='image.jpg' alt='image'> causes the images that are larger than the container to spill out.

  
  


• 
  

  <img src='image.jpg' alt='image' style=width:100%;'> scales down
  
  the images that are larger than the container (GOOD), but scales up
  
  the images that are smaller than the container (BAD).

  
  


• In Chrome, <img src='image.jpg' alt='image' style=max-width:100%;'> scales down the images that are larger than the container (GOOD) and doesn’t scale the images that are smaller than the container (GOOD). However, in other browsers, this works just like <img src='image.jpg' alt='image'>.