CSS-100vh响应式图片：全屏布局图片无法适配屏幕，问题何在？

先看一下你的问题和代码：

我正在尝试构建一个简单的全屏布局，使图片调整尺寸后仅占屏幕大小。代码如下：

body, html { margin:0; padding:0; }
.wrapper { background:teal; height:100vh; }
.frame img { max-width:100%; height:auto; }

<div class="wrapper">
  <div class="frame">
    <img src="https://dummyimage.com/1500x2000/000000/fff">
  </div>
</div>
我预期图片能适配屏幕，但实际并未实现，请问问题出在哪里？

其实问题出在你的.frame容器没有任何尺寸约束，而且.wrapper只设置了高度，没处理内容溢出和对齐逻辑，导致图片的max-width:100%没有有效的参照对象，自然没法适配屏幕。具体来说：

• .frame是块级元素，但没设置宽高，它的尺寸会完全由内部图片的原始大小撑开，超出.wrapper的100vh高度后也不会被裁剪；
• 图片的max-width:100%是相对于.frame的宽度，但.frame宽度跟着图片走，等于没做任何限制。

给你两个针对性的解决方案，你可以根据需求选择：

方案1：让图片完整显示在屏幕内（保持比例，不裁剪） #

修改CSS如下：

body, html { margin:0; padding:0; }
.wrapper { 
  background:teal; 
  width: 100vw;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.frame {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

这个方案会让图片按比例缩小，完整显示在屏幕里，屏幕空白区域会显示你设置的teal背景色。

方案2：让图片覆盖整个屏幕（裁剪超出部分，保持比例） #

如果希望图片铺满屏幕、不留空白，可以用object-fit: cover：

body, html { margin:0; padding:0; }
.wrapper { 
  background:teal; 
  width: 100vw;
  height:100vh;
  overflow: hidden;
}
.frame {
  width: 100%;
  height: 100%;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

object-fit: cover会让图片按比例放大/缩小，填满整个容器，超出屏幕的部分会被裁剪掉，保证屏幕完全被图片覆盖。

简单来说，核心就是给.frame设置和.wrapper一致的宽高约束，再通过max-width/max-height或object-fit来控制图片的显示方式，这样就能实现你要的全屏适配效果了。

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