Question

我正在'card-columns'下的bootstrap中的卡片上设置图像的缩放比例效果，但是该效果在缩放时可见，然后根据卡片尺寸进行调整。 “溢出：隐藏”对此没有影响。

我尝试应用'display：inline-block'。将父卡从“卡列”更改为“卡甲板”即可完成所需的行为。我想将卡柱的砌体效果与所需的溢出效果结合使用。

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>

引导程序列中的溢出属性无法正常工作，需要建议

1 个答案: