How to resize an image in CSS?

You can use the width, max-width, min-width, height, max-height & min-height properties to change the image size. See the examples below.

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

This is how you can resize the images. 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 height, the width will proportionally change.

You can also use multiple width & height properties together. Please see some of the examples below.

img {
  width: 800px;
  max-width: 100%;
}

The above CSS will make the image 800 pixels if there is available space. But if the available space is lower than 800 pixels, then then max-width: 100% will make the image adapt available space. Actually, you should specify max-width: 100% globally for all the images on your website. This way the images become responsive.

img {
  min-width: 200px;
  max-width: 400px;
}

If the actual image size is lower than 200 pixels (width), the above CSS will make it 200 pixels always & on all screens. But if the actual image is bigger than 400 pixels (width), the above CSS will make the image 400 pixels and it will never exceed this 400 pixels.

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

The above CSS will force the image to occupy full height based on its actual size (min-height: 100%) but it will never exceed 400 pixels (max-height: 400px).

img {
  height: 250px;
  min-height: 150px;
  max-height: 450px;
}

The above CSS will make the image 250 pixels (height) always.

img {
  height: 250px;
  min-height: 350px;
  max-height: 450px;
}

Can you calculate the size?

The above CSS will make the image 350 pixels (height) always.

If you specify the same property multiple times, the last one will win. See the example below.

img {
  width: 200px;
  width: 300px;
  width: 400px;
}

Based on the above CSS, the image will be 400 pixels.

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.

If you want a specific image to be 600 pixels in width, you can target the image based on its CSS class or ID. For example:

div.container img {
  width: 600px;
}

This is the best way to specify image sizes.

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.

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

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

Learn more about images

• How to resize an image in CSS?
• How to add images to an HTML table?
• How to create an image hover animation effect only with CSS?
• How to position text over an image with CSS?
• How to change an image on hover (CSS)
• Center an image in various directions & methods
• How to right-align an image in HTML CSS?
• How to create a hero banner image using HTML CSS?
• How to wrap text around an image in HTML?
• How to rotate text & images using CSS?

Build HTML CSS projects

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.