How to change image size in CSS?

Sometimes, it is required to fit an image into a certain given dimension. We can resize the image by specifying the width and height of an image. A common solution is to use the max-width: 100%; and height: auto; so that large images do not exceed the width of their container. The max-width and max-height properties of CSS works better, but they are not supported in many browsers.

Another way of resizing the image is by using the object-fit property, which fits the image. This CSS property specifies how a video or an image is resized to fit its content box. It defines how an element fits into the container with an established width and height.

The object-fit property is generally applied to image or video. This property defines how an element responds to the width and height of its container. Mainly there are five values of object-fit property such as fill, contain, cover, none, scale-down, initial, and inherit. The default value of this property is "fill".

Example

In this example, we are resizing the image by using the max-width: 100%; and height: auto; properties.

<!DOCTYPE html>
<html>
<head>
<title>cell padding</title>
<style>
div {
width: auto;
text-align: center;
padding: 15px;
border: 3px solid red;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div>
<img src= "forest.jpg">
</div>
</body>
</html>

Test it Now

Output

Example

In this example, we are using the object-fit: cover; property.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: auto;
text-align: center;
padding: 15px;
border: 3px solid red;
}
img {
object-fit: cover;
}
</style>
</head>
<body>
<div>
<img src= "forest.jpg" width = "300" height = "300">
</div>
</body>
</html>

Test it Now

Output

In the above example, we have used the cover value of the object-fit property. Similar to the above example, we can use the other values of the object-fit property in order to resize the image.

Next TopicHow to change link color in CSS

← prev next →