无需object-fit，纯CSS实现图片自适应视口并添加同尺寸遮罩

不用再给横竖版图片单独写样式类，也不用JS切换，一套CSS就能让遮罩层完美贴合图片：

核心思路 #

• 用inline-block的容器包裹图片和遮罩，容器会自动贴合图片的实际显示尺寸
• 给图片设置max-width: 100vw和max-height: 100vh，让它自动适配视口范围，同时保留原生宽高比，横竖版图片都能自动调整显示大小
• 遮罩层绝对定位在容器上，直接继承容器的尺寸，自然和图片完全匹配

代码实现 #

html, body {
  margin: 0;
  padding: 0;
}

.image-container {
  position: relative;
  display: inline-block;
}

.image {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
}

<div class="image-container">
  <img src="https://www.dailycameranews.com/wp-content/uploads/2018/02/canon-eos-m50-sample-images-05.jpeg" class="image"/>
  <div class="overlay">This is an overlay</div>
</div>

为什么这方法管用 #

• 图片的width: auto和height: auto保证了原图宽高比不会被打乱
• max-width和max-height限制图片不会超出视口，不管是竖版还是横版，都会自动缩放到视口内能显示的最大尺寸
• 容器是inline-block，会完全贴合图片的显示大小，所以遮罩层的尺寸和图片完全一致，不会出现用object-fit: contain时遮罩过大的问题

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