如何用CSS实现支持不同尺寸的图片悬停覆盖效果？

问题描述 #

需要实现图片悬停时的覆盖效果，要求支持尺寸不同的原图与覆盖图，但当前实现中，当覆盖图与原图尺寸不同时，无法完全覆盖容器区域。

原代码 #

CSS #

.container {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML #

<div class="container">
  <img src="竖版占位图" alt="竖版原图" class="image">
  <div class="overlay">
    <img src="覆盖图">
  </div>
</div>

<div class="container">
  <img src="正方形占位图" alt="正方形原图" class="image">
  <div class="overlay">
    <img src="正方形覆盖图">
  </div>
</div>

问题原因 #

原代码中.container固定了height:150px，但原图设置了height:auto，当原图为非正方形（比如竖图）时，原图高度会超出容器的固定高度，导致.overlay仅覆盖容器的固定尺寸区域，无法覆盖原图超出的部分。

解决方案 #

修改.container的样式，移除固定高度，让容器高度由原图自动撑开，同时调整.overlay的定位方式，确保它能完全覆盖容器（即原图的显示区域）：

修改后的CSS #

.container {
  display: inline-block;
  position: relative;
  width: 150px;
  /* 移除固定height，让高度随原图自适应 */
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

说明 #

• 移除容器的固定高度后，容器会根据原图的宽高比自动调整高度，保证原图完整显示且不会被裁剪。
• .overlay通过top:0; left:0; width:100%; height:100%;绝对定位在容器上，完全覆盖整个原图区域。
• object-fit: cover确保覆盖图在填充容器时保持比例，不会变形，同时裁剪超出部分以填满容器。

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