How to create: responsive images

Learn how to use CSS to create responsive images.

Responsive images will automatically adjust to fit the screen size.

Adjust the browser window size to view the responsive effect:

Lights

View the effect

How to create responsive images

Step 1 - Add HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

Step 2 - Add CSS:

If you want the image to be responsive and able to both zoom in and out, set the CSS width Property set to 100%,height Set to auto:

Example

.responsive {
  width: 100%;
  height: auto;
}

Try it yourself

If you want the image to shrink when necessary but never enlarge to a size larger than its original size, use max-width: 100%:

Example

.responsive {
  max-width: 100%;
  height: auto;
}

Try it yourself

If you want to limit the responsive image to the maximum size, use max-width Properties and the pixel value you choose:

Example

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Try it yourself

Related pages

Tutorial:CSS image

Tutorial:CSS responsive web design