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

这些图像将显示在一列小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 fromGratisography.

Read Tutorial