Allowing images to scale along with their container is an important part of responsive web design (and was so even before the term “responsive web design” existed). It’s really quite easy – all you need to do is give the image a width (or max-width) in percent:

img {
    max-width:100%;
}

This will prevent any img element from getting wider than its container. If the container is narrower than the image, the image will scale down. But there is a catch.

Read full post

Posted in CSS.

Copyright © Roger Johansson