窗口视口高度缩小时如何调整图片高度以保持在视口中

要实现窗口垂直高度缩小时图片始终保持在视口范围内，你需要确保容器和图片的尺寸都基于视口约束，同时保证图片居中且按比例缩放。修改后的代码如下：

<!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>
  /* 隐藏滚动条并确保根元素占满视口 */
  html, body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
  }
  body::-webkit-scrollbar {display: none;}

  /* 容器占满视口并居中图片 */
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 图片按比例缩放，不超出容器范围 */
  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
</style>
</head>
<body>
<div class="container">
  <img src="wallpaper.jpg">
</div>
</body>
</html>

关键修改点： #

• 给html和body设置height: 100vh和overflow: hidden，确保整个页面占满视口且不会出现滚动条。
• 给.container添加弹性布局（display: flex），配合align-items: center和justify-content: center让图片在视口中水平、垂直居中，同时容器自身占满视口宽高。
• 移除图片的height: 100%属性，保留max-width: 100%、max-height: 100%和object-fit: contain，保证图片按自身比例缩放，始终完全显示在视口范围内。

内容的提问来源于stack exchange，提问作者shirha