Nuxt模板中实现与图片尺寸位置完全匹配的Overlay

要让Overlay和图片的尺寸、位置完全一致，不管图片宽高比，通过容器包裹+绝对定位就能实现，具体修改如下：

模板结构调整 #

把图片和Overlay放到同一个容器内，让容器自适应图片的尺寸：

<template>
  <div class="image-container">
    <div class="overlay"></div>
    <img class="img" :src="image?.imageSrc" :alt="image?.id" />
  </div>
</template>

样式修改 #

给容器设置相对定位，让Overlay基于容器做绝对定位，完全覆盖容器（即图片区域）：

<style scoped lang="scss">
.image-container {
  position: relative;
  display: inline-block; /* 让容器自适应内部图片的尺寸 */
  line-height: 0; /* 消除图片默认行高带来的底部间隙 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 128, 0, 0.5); /* 加透明度方便查看覆盖效果 */
}

.img {
  max-width: 100%;
  max-height: 100%;
}
</style>

原理说明 #

• image-container用inline-block，会自动根据内部图片的实际宽高调整自身尺寸，适配任意图片比例。
• overlay设置绝对定位后，相对于容器的四个边缘对齐，宽高设为100%即可完全覆盖图片区域。
• line-height: 0用于消除图片默认行高导致的容器底部间隙，保证尺寸完全匹配。

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