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 CSSto 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.
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 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:
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;
}
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.
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.
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.
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.
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.
