How to Control the Size of an Image without Stretching in CSS ?
Last Updated :
14 Feb, 2024
Controlling the size of an image while maintaining its aspect ratio is a common challenge in web design. Directly setting an image’s width and height can lead to stretching or squashing, distorting the original aspect ratio. Fortunately, CSS offers several techniques to resize images without distortion. This article explores various approaches to achieve this, ensuring your images remain responsive and visually appealing.
Approach 1: Using max-width and max-height
Setting max-width and max-height properties allow an image to scale down if it’s too large but remain unchanged if it’s smaller than the maximum dimensions specified. This approach maintains the image’s aspect ratio automatically.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Control Image Size</title>
<style>
img.responsive {
max-width: 100%;
max-height: 300px;
display: block;
margin: auto;
}
</style>
</head>
<body>
<img src="
alt="Responsive Image"
class="responsive">
</body>
</html>
|
Output
Approach 2: Using object-fit Property
The object-fit property specifies how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. Using object-fit: contain; ensures that the image’s aspect ratio is preserved as it scales to fit the container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Object Fit Example</title>
<style>
.container {
width: 100%;
height: 300px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="container">
<img src=
alt="Object Fit Image">
</div>
</body>
</html>
|
Output
Approach 3: Using background-image
Another method involves using CSS background properties to control the size of an image. This is particularly useful when you need the image to serve as a background and want to avoid stretching.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Background Image Example</title>
<style>
.background-container {
width: 100%;
height: 300px;
background-image: url(
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="background-container"></div>
</body>
</html>
|
Output
Share your thoughts in the comments
Please Login to comment...