Question

我正在尝试显示带有图片的博客文章。

我正在使用引导程序4中的卡片列，当用户悬停图像时，它将对其进行缩放。

问题是发生过渡时，我的边界半径设置为默认值，然后又恢复为10px。（请参阅悬停效果的顶部边框）

请查看我的小提琴：https://jsfiddle.net/feifles/93w7ryko/3/

body {
  background-color: green;
  padding: 50px;
}

.card {
  border-radius: 10px;
  border: 0;
}

.card img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card-columns {
  background-color: green;
}

.zoom {
  overflow: hidden;
}

.zoom img {
  max-width: 100%;
  -moz-transition: all 0.7s;
  -webkit-transition: all 0.7s;
  position: relative;
  transition: all 0.7s;
}

.zoom:hover img,
.zoom:focus img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="card-columns">
      <div class="card zoom">
        <img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
      <div class="card zoom">
        <img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
      <div class="card zoom">
        <img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
    </div>
  </div>
</div>

错误/问题似乎仅在Chrome上发生

Answer 1

在过渡中，有些错误仅在Google Chrome中可用，因此有两个CSS有用项：

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);

-webkit前缀用于Chrome，-moz前缀用于Firefox。

您更新的小提琴是https://jsfiddle.net/gp8k0zm4/

如何修复图像的过渡缩放

1 个答案: