Question

Repsonsive web design works great on most html elements excepts images.I find it a mess. When resizing viewports, you cannot use resizing percentages on an image since it will take on the parent element width and height right. You need to set fixed widths and heights for images…Or am I missing something?

So how exactly do you do a responsive design involving images whose container element/parent will stretch above its native width and shrink below its native width?

Thank you

Answer 1

The done thing in responsive design is to set this in your css for images and some other elements:

img, embed, object, video {
max-width:100%;
    height:auto;
}

Then in your html the image simply takes up the size of it’s container.

You do not set the image size itself you just let it grow/shrink itself.