How to Change Image Size in CSS?

We insert images in websites to make them visually attractive and appealing to the user. However, the websites we see would not have been half as beautiful if we would not have control over the image size in them. Luckily, we can change the image size very easily using CSS. There are quite a few different methods by which we can change the CSS image size. Let us first understand why it is important to change image size in CSS. If we do not apply any restrictions on the image size, the image would occupy the total pixel of its size. But we want all images to fit within the container they are placed in. This is particularly important for creating responsive websites. Thus, it is important to know about CSS image size.

Syntax

We shall see the syntax for the different methods that we can use to change image size in CSS.

Method 1: Using Max-Width and Max-Height Properties

In this method, we specify the max height and max width of the image.

Method 2: Using Object-fit property

The object-fit property will change the dimensions of the image so as to fit it within the container it is placed in. There are five types of object-fit values that we can specify- fill, contain, cover, none, scale-down.

Method 3: Using an Auto Value for Width and Max-Height Property

In this method, we set the value of width to be auto while setting the maximum height.

Method 4: Resizing with Background Size Property If we want to change the size of background images, we use the background-size properties. We can specify three kinds of background-size properties - contain, cover, stretch.

Use the max-width and max-height Properties to Resize the Image in CSS

We can change the size of an image using CSS by specifying the maximum height and maximum width of the image. As discussed above, having an image greater than the size of the container it is placed in, is not desirable. This is because, being larger in size, the image will take up space from other areas of the webpage and from other elements. This will distort the design and the webpage will look unattractive to the user. To solve this problem we use max-width and max-height properties to resize the Image in CSS. Let us see if it's working,

If an image has dimensions greater than the size of the container it is placed in, max height and max width will shrink the image so that it fits within the dimensions of the container.

If the image has dimensions, smaller than the dimensions of the container it is placed in, applying max-height and max-width won't change the dimensions of the image.

In the below example, we have added an image inside the container myClass which has a padding of 50 px on all sides. We then set the image to 100% max width and 100% max height. Thus the image perfectly fits inside the container it is placed in.

Output

Use the object-fit Property to Resize the Image in CSS

The object-fit property, as the name suggests, changes the dimensions of the image so as to fit it within the container it is placed in. We specify the way we want to fit the image within the container. The object-fit property is applied to both images and videos, to fit them within their content box. It defines the way the image will fit with respect to the height and width of the content box. Mainly there are five ways in which we can fit the image or video. These are fill, contain, cover, none, scale-down.

Let us go through each of them.

1. Fill - The default value of the object-fit property is fill. Using this object-fit property resizes the image such that it fills the entire dimension. Often the image is stretched or squished so as to fit.

Output

2. Contain - This object-fit property resizes the image to fit the given dimension but at the same time maintains its aspect ratio. To shrink a larger image into the size of the container, we can use the contain value.

3. Cover - The image is clipped to fit the given dimension if the cover object-fit property is used. The aspect ratio of the image is maintained.

4. None - The image will not be resized if we use this object-fit property.

5. Scale-down - Using this object-fit property scales down the image to its smallest version.

Output

Use the Auto Value for Width and the max-height Property to Resize the Image in CSS

We can use the auto value for width and set it's max-height to 100% so as to fit within the container it is placed in. In this way, we can prevent overriding any default width, and thus prevent distortions within the image. We can do the other way round as well, where we specify the max-width and set the height value as auto.

Here is the code-snippet for the same.

Resize with Background-size Properties

The methods that we discussed above work well for images that we embed in our web pages. If we want to change the size of background images or images which fill up the entire webpage or have other designs going over them, it is recommended to use the background-size properties.

There are three different ways in which we can change the size of our background images:

Contain: The contain background-size property is used to scale the background image so that it fits the entire space, as well as the aspect ratio of the image, is maintained. We use no-repeat so that a single image fits within the boundaries of the web page. Here is the code snippet for the same -

However, sometimes, the image might not fill the entire page properly and we may be left with some gaps and empty spaces. To avoid this issue, we should set the height and width of the image manually.

Cover: This background-size property will scale the dimensions of the image such that it covers the entire space. There won't be any empty spaces or gaps remaining if we specify this background-size property. Since a single image will cover the entire space, we do not need to specify no-repeat explicitly.

Here is the code snippet for the same:

Stretch: This is also known as the 100% 100% background-size property. This background-size property will stretch the image to the edge of the container both vertically and horizontally. However, doing this might distort the original aspect ratio of the image. Here is the code snippet for the same.

Browser Compatibility

CSS Image size is compatible with all major browsers including:

It can also be used for other browsers such as:

• Safari
• Chrome Android
• Firefox for Android
• Opera for Android
• Safari on IOS
• Webview Android
• Samsung Internet
• Deno