Resize image using CSS

Resizing images to adapt to any screen sizes

bulb image to explain css code
img {max-width: 100%; height: auto; /*optional -height: auto*/}

Only with this one line of CSS, all your images will become responsive and adapt to any kind of device size. Try resizing the browser or the above image (drag the bottom-right corner of this image).

Resizing images on a certain scale (proportionally)

bulb image to explain css code
img {
 width: 80%;
 height: auto;

 /*if you want to center align the image, write two line of CSS below:*/
 /* margin: 0 auto; */
 /* display: block; */
}

This 80% width is relative to the container div.

Proportionally resize the image based on width and height

The above example resizes the image based on 80% width and the height comes automatically. But if you want to resize an image based on both width and height on a predefined scale, you have to assign the object-fit property.

bulb image to explain css code
img {
 width: 900px;
 height: 300px;
 object-fit: cover;
}

You can use this object-fit property to prevent your image from squishing or stretching, especially when assigning both the width and height.

The default value is “fill.” There are other values that you can explore and see what works the best for your project: contain, scale-down, none, and cover (applied in the above example).

Resize images in specific width and height

Example: 1 bulb image to explain css code
Example: 2 bulb image to explain css code
/*Example: 1*/
img {
 width: 400px;
 height: 300px;
}
/*Example: 2*/
img {
 width: 400px;
 height: auto;
}

If you take a closer look at the above two images, the first image has become stretched. Because the width: 400px and height: 300px do not match the actual proportion of the image.

But in the second example, the image received its proportional height value. And it looks better than the first example.

So it’s always best practice to assign “height: auto” in your CSS while resizing images.

Difference between width and max-width in CSS

width and max-width create the same space for absolute lengths. For example- pixel, inch, centimeter, point, etc. These images below have width values 384px & 4in respectively. So these two have the same width because 384px = 4in.

bulb image to explain css code
bulb image to explain css code

But these two properties (width & max-width) do not express all length units equally. For example- rem, em, percentage, or any other relative lengths.

However, if you assign a 400px width for an image, it will always be 400 pixels, no matter if the screen is larger or smaller than 400px (until there is a max-width: 100% globally).

On the other hand, if you assign 400px as the max-width, it will never exceed this limit and at the same time, the image will not shrink in smaller screen sizes that are less than 400px.

And that is a misconception among many developers. But if it’s you, try the below CSS and you’ll see that the images are exceeding the viewport or screen.

img {max-width: 4535px;}
/* try this CSS just to break your incorrect opinion about max-width */

Most developers think that max-width will decrease the length of the image on a smaller screen. But it’s not true. In reality, it’s not only the maximum width but also the minimum width.

Do you want to know about resizing background images using CSS? See this post as a reference.