top of page

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 Wix Studio.

Illustration by Linor Pinto.

Profile picture of Suzanne Scacca


5 min read

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 Wix Studio, 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%

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

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%;


The stretching property doesn’t retain your image’s original aspect ratio.

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

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

Keep in mind that with this property, you run the risk of losing some of your image if it stretches past the container vertically or horizontally.

How to resize images

If you’re using Wix Studio to build responsive websites, you don’t have to use CSS. You can also use a drag-and-drop interface that doesn’t require the use of code.

Images on Wix Studio are placed inside containers, ensuring that they can never be distorted and their appearance will remain intact and independent of any parent elements or sections.

Here’s how it works:

1. Add an image to your page

In the “Add Panel,” go to “Media” and add your image from the library or from your device. Drag and drop the image into the page.

2. Resize the image

Select the image and open the inspector panel on the right.

Under “size,” choose the “fluid” option so you can resize your images and scale them proportionally while doing so.

Fixed sizing keeps the width of the element the same across all viewport sizes, while fluid sizing adjusts the width—and sometimes the height—of elements depending on the screen size.

You can also choose the “scale proportionally” option, allowing the image’s height and width to maintain their ratio when resized.

A black and white image on a leaf set to "fluid” on Wix Studio

Similar to when you resize an image using CSS, Wix Studio allows you complete control over the display of your visuals—without requiring the use of code:

  • Set an exact width or height

  • Set a max width or height percentage

  • Set a max width or height in pixels

Changes you make in individual breakpoints will cascade down —so if you make changes on desktop, these will automatically reflect in all the smaller breakpoints, but not the other way around. You can immediately check the results on various breakpoints and adjust accordingly.

3. Stretch the image

There’s no need to deal with cover, contain, or “100% 100%” settings. Instead, to make an image stretch to fill the boundaries of its section, just click the Stretch icon in the top-right corner of the graphic.

Your image will go from looking like this:

A website design on Editor X with an image of a flower

To full-width, like this:

A website design on Editor X with an image of a flower stretched to full-width

You can then use your size settings in the Inspector panel to refine how, exactly, the image fills out the space.

Other useful resizing settings in Wix Studio

  • Focal point: The focal point tool allows you to choose which part of your graphics stay in focus as the screen size changes. First select the image, then from the floating action bar click the Focal Point icon. Next, drag the blue dot to the spot you want to focus on – or simply click the spot you want. This way, even if parts of the image are cut out during resizing, the focus of the image will always remain where you intended. For extra control over your image display, you can select a different spot at each breakpoint.

The focal point tool on Editor X allowing to zoom in on a detail of a flower in a black and white photo

  • Stack: Stacking is a way to control the relationship between elements that are arranged above and below each other on your canvas. Stacking keeps a vertical margin between elements so that they retain a clear space between them across all screen sizes. Using Stack allows images to scale proportionally.

  • Crop and zoom: Cropping and zooming images on smaller screen sizes is a creative option for resizing. Any changes you make on the mobile viewport will apply only to mobile (or smaller viewports), as part of the cascading rule. If you want to apply these settings across all devices, make your focal point, cropping, or zooming changes from the desktop view.

Visuals are such an important factor in the way we consume content and information. With proper resizing and scaling—through CSS or an advanced platform like Wix Studio— you’ll ensure that your images look great for all visitors no matter which devices or browser they use.

Find new ways FWD

Thanks for submitting!

By subscribing, you agree to receive the Wix Studio newsletter and other related content and acknowledge that Wix will treat your personal information in accordance with Wix's Privacy Policy.

Do brilliant work—together

Collaborate and share inspiration with other pros in the Wix Studio community.

Image showing a photo of a young group of professionals on the left and a photo highlighting one professional in a conference setting on the right
bottom of page