Responsive Web Design - Images

Using The width Property

If the width property is set to a percentage and the height is set to "auto", the image will be responsive and scale up and down:

Example -

Using The max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example -

Background Images

Background images can also respond to resizing and scaling.

Here we will show three different methods:

1. If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height):

Example -

Example -

Example -