Responsive IMGs support measurements

Question

I have a responsive website where I resize all my images in the corresponding CSS3 media query viewports. I am wondering if there is an easier way to declare that I want all my images to be resized, preserving their original sizes, and not manually resizing each of them accordingly using 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 the img {max-width: 100%} declaration should do the trick. The image is reduced and retains its size.

Answer 2

Use background-size: contain; or background size: cover; if necessary.

Answer 3

This is what is needed for what liquid images are commonly called:

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

The first declaration ensures that all images do not exceed the width of their containing element. An automatic declaration for height ensures that all images retain their proportions when reduced, even if they have size attributes in the img element.

That way you can simply declare the width or maximum width in the img container element without worrying about size / proportions.

Answer 4

use image 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>