How to change image size in CSS?

You can use the width, max-width, height, and max-height properties to change image size in CSS. See the examples below.

img {
  width: 400px;
}
img {
  max-width: 100%;
}
img {
  height: 500px;
}
img {
  max-height: 400px;
}

This is how you can change image size in CSS. You can also add auto height & width but this is optional. For example:

img {
  width: 400px;
  height: auto;
}
img {
  height: 400px;
  width: auto;
}

After you specify the width, the height will be automatically resized proportionally. In the same vein, if you specify a height, the width of the image will proportionally change.

Want to learn more? Keep reading.

The best approach to image sizing in CSS

Whenever you work on any projects, your first step should be to include a “max-width” of 100% for all images. You can think of this as a global rule for <img> tag. In your every web design project, add the following CSS:

img {
  max-width: 100%;
}

This will make your images responsive. Otherwise, some of the images may exceed the viewport width.

However, it does not mean that you are not allowed to change the size later. If you need to change the size of one or more images, you can do that later.

The “max-width: 100%” applies globally. But if you want a specific image to be 600 pixels in width, you can target the image based on CSS class or ID. For example:

div.container img {
  width: 600px;
}

This is the best way to set & control image size in CSS.

How can you make an image 100% width in CSS?

Think of a situation where the image has a 500 pixels width and the container div is 1200 pixels. In this case, the “max-width: 100%” will not make the image consume all the available widths.

To make the image full-width, you have to write “width: 100%” instead.

.banner img {
  width: 100%;
}

Some real-world use cases & examples for resizing images

I explained 5 real-world cases about resizing images using CSS. Also, you’ll find a couple of examples and code samples for all the steps.

Resizing images to adapt to any screen sizes

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)

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.

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 width and height.

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

Resize the image in specific width and height

Example: 1

Example: 2

/*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.

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 */

A similar topic:

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

Conclusion

Some of you 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.

Anyways, I discussed a lot about image size in CSS, provided different examples, and explained the best practices. If you have any questions, let me know.