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:
Here’s how it looks when we use the CSS width attribute:
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:
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;
}
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.
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;
}
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.
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:
To full-width, like this:
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.
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.
.jpg)
.jpg)
