CSS ![]()
adaptive size
CSS <img>Adaptive Size
<img>Adaptive Size” title=”CSS <img>Adaptive Size” />
In web design, https://coder-cafe.com/wp-content/uploads/2025/09/images often need to be resized. A common requirement is to maintain a certain proportion and maintain distortion across different screen sizes. In this case, we can use CSS to achieve adaptive image resizing.
Using max-width and max-height
By setting the maximum width and maximum height of an image, you can make it scale proportionally across different screen sizes. We can use the max-width and max-height attributes to achieve this effect. For example, consider the following HTML code for an image:
<img src="example.jpg" alt="Example Image" class="responsive-image">
We can use CSS to set the size of this image to be adaptive:
.responsive-image {
max-width: 100%;
height: auto;
}
In this CSS code, we use max-width: 100%; to set the maximum width of the image to 100% of the parent element, meaning the image will scale according to the parent element’s size. We also set height: auto; to ensure the image’s height automatically adjusts to changes in width, preserving the image’s proportions.
Using vw and vh Units
In addition to using the max-width and max-height attributes, we can also use the vw and vh units to achieve adaptive image resizing. The vw unit represents a percentage of the viewport width, while the vh unit represents a percentage of the viewport height. Using these two units, we can adjust the image’s size according to the viewport size.
For example, let’s take the following HTML code for an image:
<img src="example.jpg" alt="Example Image" class="responsive-image">
We can use CSS to make https://coder-cafe.com/wp-content/uploads/2025/09/images resizable:
.responsive-image {
width: 50vw;
height: 50vh;
}
In this CSS code, we set the image width to 50% of the viewport width using width: 50vw; and the image height to 50% of the viewport height using height: 50vh;. This allows the image to resize according to the viewport size, maintaining its proportions.
Using Media Queries
In responsive design, we often use media queries to apply different CSS styles based on different screen sizes. Using media queries, we can set different image sizes for different screen sizes, thus achieving image adaptiveness.
For example, if we want to display a large image on a large screen and a small image on a small screen, we can use media queries to achieve this:
.responsive-image {
width: 100%;
height: auto;
}
@media screen and (max-width: 600px) {
.responsive-image {
width: 50%;
}
}
In this CSS code, we use width: 100%; and height: <code>auto; sets the image to adapt to large screen sizes. In the media query @media screen and (max-width: 600px), we set the image width to 50% when the screen width is less than 600px, allowing a smaller image to be displayed on smaller screens.
Example Demo
The following example demonstrates how to use CSS to adapt image sizes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
}
.responsive-image {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="Example Image" class="responsive-image">
</div>
</body>
</html>
In this example, we set a container with a maximum width of 800px and placed an image inside it. We set the image to resize automatically using CSS. When the browser window is resized, the image automatically adjusts to the container’s size, maintaining its proportions.
Using the above method, we can easily achieve image resizing, making the image look more beautiful and professional on different screen sizes.