缩小视口高度时调整图像高度

问题描述 投票:0回答:1

我到处搜索,但找不到在缩小窗口垂直高度时将图像保留在视口中的解决方案。这是一个屏幕截图,显示了我正在尝试做的事情。任何考虑表示赞赏!

<!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>
 
html css image resize
1个回答
0
投票

您应该使用

height: 100vh;
。这是窗口的视图高度。

© www.soinside.com 2019 - 2024. All rights reserved.