Profile picture of Suzanne Scacca

5 min read

How to resize images for responsive web design

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

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

Illustrations by {name}

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. 

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.


With responsive web design, 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.


Design advanced, responsive websites on Editor X—no code needed.


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%


By setting the max-width at 100%, the image will now fit to the full width of the container regardless of how narrow or wide the screen is.


That said, in order to prevent image distortion, you’ll need to set the height to auto. This way, the image will never exceed its original dimensions.



Resize with background-size properties


The methods mentioned above for resizing images work well for graphics embedded into your pages. However, for background images — where the image fills up the webpage and other design elements go on top of it — use the background-size property instead.


There are different ways to make your background images fit the allotted space:


Contain: Use the “contain” background-size property to accomplish the following:

  • Scale the background image to fit the space

  • Maintain the image’s aspect ratio


In order to make an image fit into the boundaries of the page, use the “no-repeat” background-repeat property. The code will look like this:



div {

background-image: url("imageurl.jpg");

background-repeat: no-repeat;

background-size: contain;

}



A website design with a background image using the no-repeat contain background-size property in CSS


One thing to keep in mind with this CSS property:


If the image doesn’t fit the dimensions of the page perfectly, you might end up with some gaps around the image. You can solve this by configuring the height and width properties.


Stretch: Use the “100% 100%” background-size property to accomplish the following:

  • Stretch the image vertically to the edge of the container

  • Stretch the image horizontally to the edge of the container


The code will look like this:



div {

background-image: url("imageurl.jpg");

background-size: 100% 100%;

}



A website design with an image background stretched to “100% 100%” background-size property


Note that this stretching property doesn’t retain your image’s original aspect ratio.


Cover: Use the “cover” background-size property for scaling the background image to fit the entire space.


The code will look like this:



div {

background-image: url("imageurl.jpg");

background-size: cover;

}



A website design with an image background set to "cover” in the background-size property in CSS