top of page

How to resize images in CSS 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.

Design by Linoy Shalem.

Profile picture of Suzanne Scacca

5.30.2024

7 min read

As a web creator, you pay attention to every detail that goes into your website design, you stay up on the latest web design trends and you handpick the images you use with great care. That’s why making sure your visuals retain their highest quality and correct aspect ratio on every screen size is so important. Otherwise, your images might show up as distorted or cut off. 


With responsive web design, you can add custom CSS to make every image fit just as you envisioned it—on every screen. This guide explains how to resize your images with CSS. You'll also find additional methods for setting image display with CSS to help optimize your web design


And if you’re creating a website on Wix Studio, then you’ll find advanced, code-free design capabilities for resizing images toward the bottom of this post.


The web creation platform built for agencies


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 600 pixels, use this CSS code:



img {

width: 600px;

}



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.



Option 3: 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.


Design websites with CSS—get started on Wix Studio.



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.



How to test the responsiveness of your web design


Resizing images using CSS is a fundamental skill for ensuring that your web designs are responsive and visually appealing across different devices. By leveraging properties like `width`, `max-width`, and `height`, you can control the dimensions of your images to fit within various screen sizes without losing their aspect ratio. Additionally, properties such as `background-size` can be utilized to manage the appearance of background images, allowing them to cover, contain, or stretch to fill the space appropriately.


These techniques help maintain the integrity and quality of your images, preventing distortion or unwanted cropping and ensuring you’re adhering to web design principles. Whether you’re coding manually or using a platform like Wix Studio, understanding how to make a responsive website that effectively resize images ensures that your visuals will look professional and consistent on any device. (Check out some responsive website design examples.)



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. (Be sure to check out these mobile design best practices and read more about mobile-first vs responsive web design.)


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


Create responsive sites faster on Wix Studio with an AI layout generator.



Resize images in CSS: FAQ


Resizing images using CSS is a fundamental skill for ensuring that your web designs are responsive and visually appealing across different devices. By leveraging properties like width, max-width, and height, you can control the dimensions of your images to fit within various screen sizes without losing their aspect ratio. Additionally, properties such as background-size can be utilized to manage the appearance of background images, allowing them to cover, contain, or stretch to fill the space appropriately. 



How do I align an image size in CSS?


To align an image size in CSS, use the width or max-width property to set the desired size. For example, to align an image to be 300px wide:


img {

  width: 300px;

}



How do you auto resize an image to fit in CSS?


To auto resize an image to fit within a container while maintaining its aspect ratio, use the max-width and height properties:


img {

  max-width: 100%;

  height: auto;

}



How can image size be reduced in CSS without cropping?


To reduce an image size in CSS without cropping, use the max-width property along with height: auto:


img {

  max-width: 100%;

  height: auto;

}


This ensures that the image will scale down proportionally without being cropped.


Sign up for Wix Studio and design sites with CSS.

RELATED ARTICLES

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