How to resize images for responsive web design

Profile picture of Suzanne Scacca

{date}

{#hash1}

{#hash2}

Illustrations by {name}

Ensure that your images stay sharp and pixel-perfect on every screen size by resizing them with CSS, or intuitively on Editor X.

5 min read

A responsive web design with an image of a woman holding heaphones shown on a variety of different screen sizes

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

As a web creator, you pay meticulous attention to every detail that goes into your web design, and handpick the images that you use with great care. Making sure that your visuals retain their highest quality and correct aspect ratio on every screen size is just as important. Without it, your images might show up as distorted or cut off.


When designing responsive websites, you can use CSS to make every image fit just as you envisioned it — on every screen. This guide explains how to resize your images with CSS, as well as additional methods for setting image display with CSS.


If you’re creating a website on Editor X, then you’ll find advanced, code-free design capabilities for resizing images at the bottom of this post.



How to resize an image with CSS


If you want the images on your site to keep their pixel-perfect appearance on every screen size, you can use CSS to proportionally resize your images.


Here are some ways you can do this:



Option 1: Resize with the image width attribute


When you’d like to fit images in relation to its parent container, you can use the CSS width attribute to resize them.


Here’s how our image looks without any sizing or fit specifications:



A website design with an overflowing image that's too big for the screen size


Here’s how it looks when we use the CSS width attribute:



A website design with an image using the CSS width attribute to create a fixed width of 500 pixels


To set this image to a fixed width of 500 pixels, use this CSS code:



img {

width: 500px;

}



Keep in mind that a fixed width will display your images at the exact same size across all devices, meaning that its size won’t change in relation to the viewport.



Option 2: Resize with the max-width property


Using the max-width property allows the image to maintain its exact aspect ratio and proportions, making it a great fit for responsive web design.

Here’s how the CSS code would look:



img {

height: auto;

max-width: 100%;

}



And here’s how the image would look as a result:



A website design with an image set to a max-width of 100%