Html Question posted in
Some basic documentation can be found here.

Html – resize height of image when shrinking viewport height

I’ve search everywhere but I can’t find a solution to keep image in viewport when shrinking vertical height of window. Here’s a screenshot that shows what I’m try to do. Any consideration appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow</title>
<style>
  body::-webkit-scrollbar {display: none;}
  body {margin:0;}

  /* .container img {
    height: 100%;
  } */

  img {
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }
</style>
</head>
<body>
<div class="container">
  <img src="wallpaper.jpg">
</div>
</body>
</html>
Tags:

2

Answers


  1. 0

    You should use height: 100vh;. It’s the View Height of the window.

    Login or Signup to reply.
  2. 0

    Using height: 100dvh; makes the image dynamically adjust to the viewport’s size, ensuring it fits the screen even with dynamic changes like expanding user interfaces.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search