Responsive IMGs maintain dimensions

Question

I have a responsive website, where I am resizing all my images in the corresponding CSS3 media query's viewports. I'm wondering if there's an easier way to state that I want all my images to resize maintaining their original stated dimensions as opposed to manually resizing each accordingly with max-height, width, etc. Any suggestions?

EG Below.

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

#logoimg { max-height: 100px; max-width: 100px; }

}

Answer 1

I believe declaring img {max-width:100%} should do the trick. The image will scale down and maintain its dimensions.

Answer 2

Use background-size: contain; or background-size: cover; as appropriate.

Answer 3

This is what's needed for what is commonly referred to as fluid images:

img {
  max-width: 100%;
  height: auto;
}

The first declaration makes sure all images won't exceed the width of their containing element. The auto declaration for height ensures all images retain their proportions when scaled down even when they have size attributes in the img element.

This way you could just declare width or max-width on the container element of the img without having to worry about dimensions/proportions.

Answer 4

use picture element http://caniuse.com/picture

manual http://www.html5rocks.com/en/tutorials/responsive/picture-element/

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>