小编Ski*_*mot的帖子

我正在尝试使用元素object-fit: cover上的css属性img来使我的图像填充其包含div并使transform: scale(xx)图像在悬停时缩小.

这是一个小提琴示例:https://jsfiddle.net/96kbuncq/
编辑:带有真实图像的示例:https://jsfiddle.net/96kbuncq/3/

HTML:

<div>
   <div class="category">
      <img src="http://placehold.it/1200x950&text=1200x950+-+Category+1+-" />
   </div>
   <div class="category">
      <img src="http://placehold.it/1200x950&text=1200x950+-+Category+2+-" />
   </div>
   <div class="category">
      <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
   </div>
</div>

CSS:

.....

div.category img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Transformations */

div.category img {
  transition: transform 0.35s;
  transform: /*translateZ(0)*/ scale(1.12);
}

div.category:hover img {
  transform: /*translateZ(0)*/ scale(1);
}

这在Firefox中运行良好,但在Chrome和Opera中我遇到以下问题:

• 当悬停第一个时div,另外两个也受到影响(当悬停第二个时,第三个也受到影响), …