How to resize an image to fit in the browser window?

Spread the love

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.

Leave a Reply

Your email address will not be published.