css - 溢出属性在引导卡列中无法按预期工作，需要建议

Question

我在 Bootstrap 中的“卡片列”下对卡片中的图像设置变换比例效果，但效果在缩放时可见，然后根据卡片大小进行调整。 '溢出:隐藏'对此没有影响。

我尝试过应用“display:inline-block”。将父卡从“card-columns”更改为“card-deck”会执行所需的行为。我想使用具有所需溢出效果的卡片列的砌体效果。

css
.card {
  overflow: hidden;
}

.card .card-img {
  transition: all 0.5s ease;
}

.card:hover .card-img {
  transform: scale(1.2);
}

<div class="container">
  <div class="card-columns">
    <div class="card bg-dark text-white">
      <img class="card-img" src="https://cdn.pixabay.com/photo/2019/03/05/12/26/toque-macaque-4036088_1280.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>
    <div class="card bg-dark text-white">
      <img class="card-img" src="https://cdn.pixabay.com/photo/2019/06/04/21/53/airplane-4252410_1280.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>
  </div>
</div>

所需的行为是在没有可见图像缩放和拟合的情况下具有变换缩放效果。

Answer 1

在使用溢出时，您必须有 height 和 Width 检查下面的代码片段。

.card {
  overflow: hidden;
  width:500px;
  height: 500px;
}

.card .card-img {
  transition: all 0.5s ease;
}

.card:hover .card-img {
  transform: scale(1.2);
}

<div class="container">
  <div class="card-columns">
    <div class="card bg-dark text-white">
      <img class="card-img" src="https://cdn.pixabay.com/photo/2019/03/05/12/26/toque-macaque-4036088_1280.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>
    <div class="card bg-dark text-white">
      <img class="card-img" src="https://cdn.pixabay.com/photo/2019/06/04/21/53/airplane-4252410_1280.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>
  </div>
</div>