Responsive Images Using CSS

Read Tutorial
Resize your browser to see the following images scale relative to your viewport's size.

Basic Responsive Image

This image will proportionally scale so that its width is 100% of its container. The container can have a maximum width of 960px.

Responsive Images in Columns

These images are displayed adjacent to each other. They will proportionally scale depending on the size of the viewport.

Two Columns

Three Columns

Responsive Images with Conditional Breakpoints

These images will display in one column on small devices (e.g. smartphones), two columns on medium devices (e.g. tablets), and four columns on large devices (e.g. desktops).

Full-width Responsive Image

This image will always be 100% wide because its container has no maximum width property.

Photos on this page are from Gratisography.

Read Tutorial