如何让图片适配浏览器视口宽高并保持比例？（Bootstrap5）

核心实现方案（img标签版） #

先重置body默认样式，避免多余边距和滚动：

body {
  margin: 0;
  overflow: hidden; /* 禁止页面滚动 */
}

给图片添加自定义类：

.viewport-image {
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  object-fit: cover; /* 保持宽高比，裁剪超出区域 */
  object-position: center; /* 居中保留图片核心内容 */
}

HTML结构：

<img src="你的图片URL" alt="图片描述文本" class="viewport-image">

备选方案（背景图版） #

如果不需要语义化的img标签，可使用背景图实现：

.viewport-bg {
  width: 100vw;
  height: 100vh;
  background-image: url("你的图片URL");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

HTML结构：

<div class="viewport-bg"></div>

关键说明 #

• 100vw/100vh 是视口单位，自动匹配浏览器窗口尺寸，无需硬编码高度，窗口resize时会实时适配。
• object-fit: cover（或背景图的background-size: cover）是保持宽高比的核心：图片会按比例缩放至填满容器，超出部分被裁剪，不会出现拉伸变形。
• object-position/background-position 可调整图片显示的重点区域，比如top、bottom等，按需修改即可。
• 设置body { overflow: hidden }是为了避免图片裁剪后出现滚动条，确保页面完全无滚动。

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