How to resize an image in CSS?

To keep your site's images looking perfect on every screen size, you can use CSS to resize your images proportionally.

Following are the ways to do this.

• Resize using the image width attribute:
If you want to position an image with respect to its parent element or container, you can use the CSS width attribute.


Syntax

img {
 width: 500px;
}



• Resize using max-width attribute:
The max-width property allows images to maintain their exact aspect ratio and proportions.


Syntax

img {
 height: auto;
 max-width: 100%;
}



• Resize using background-size properties:
If you want to resize graphics embedded into your web pages, you can use either of the abovementioned methods. For background images — where the image fills up the entire webpage, and other design elements go on top of it — you can then use the background-size property.


Syntax

div {
 background-image: url("image.jpg");
 background-size: 100% 100%;
}