Sometimes, we want to resize an image to fit in the browser window with CSS.
In this article, we’ll look at how to resize an image to fit in the browser window with CSS.
How to resize an image to fit in the browser window?
To resize an image to fit in the browser window with CSS, we set the max width and height values.
For instance, we write
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src="pic.png" />
</div>
</body>
</html>
to set the max-width and max-height values of the img element to fit the div.
Conclusion
To resize an image to fit in the browser window with CSS, we set the max width and height values.
