如何在鼠标悬停时将Bootstrap卡片图片缩放到初始尺寸？

要实现鼠标悬停时图片完整显示、同时保持.card-header-img固定150px高度的需求，无需JavaScript，只需调整图片的object-fit属性即可，具体改动如下：

修改后的CSS代码 #

.acf-blocksy-child-container {
  width: 70%;
}

.card-header-img {
  position: relative;
  height: 150px; /* 维持固定高度不变 */
  overflow: hidden;
}

.card-header-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 初始状态让图片填满容器（会裁剪多余部分） */
  transition: all 0.3s ease-in-out;
}

.card-header-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.card-header-img:hover img {
  object-fit: contain; /* 悬停时切换为完整显示图片，保留原始比例 */
  object-position: center; /* 让图片居中（可选，优化显示效果） */
}

.card-header-img:hover::before {
  opacity: 0;
}

.card-header-img:hover .card-title,
.card-header-img:hover .card-text {
  display: none;
}

原方法无效的原因 #

你尝试的transform: scale(1, calc(150px / var(--initial-height)))未生效的核心问题：

1. 计算逻辑错误：该公式用容器高度除以图片原始高度，会让图片垂直方向被压缩，反而违背了完整显示的需求；
2. 缩放逻辑不匹配：transform: scale是基于当前元素尺寸缩放，而初始状态图片已被object-fit: cover拉伸/压缩到容器大小，缩放后依然会被容器的overflow: hidden裁剪，无法实现完整显示。

完整示例代码 #

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' rel='stylesheet'>
<div class='container-fluid acf-blocksy-child-container'>
  <div class='row'>
    <div class='col-md-12 mt-5'>
      <div class='card'>
        <div class='card-header card-header-img'>
          <img src='https://cdn4.vectorstock.com/i/1000x1000/07/08/long-neck-giraffe-height-measure-vector-12290708.jpg' class='card-img img-fluid' alt='Card image'>
          <div class='card-img-overlay'>
            <h5 class='card-title text-white'>Card title</h5>
            <p class='card-text text-white'>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class='card-text text-white'>Last updated 3 mins ago</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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