Responsive web design and resizing images

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.

Answer 2

well - you can write: .selector img{width: 100%; height: auto;} and then use the size of the div it is in to determine it's scale. or you can also set the image as a background and use similar methods and maybe even mess around with background-size: cover. i'll make a jsfiddle...

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}