CSS: 在 webkit 上一起使用 object-fit 和 transform 时的问题

Question

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

这是一个示例 fiddle：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 时，其他两个也会受到影响（悬停第二个时，第三个也会受到影响），
当鼠标悬停在 div 上时，里面的图像首先会完全显示（我们可以看到整个图像被拉伸以适应 div），然后再正确缩小 "covering" div.

我不知道如何解决这些问题。

关于第一个问题（受影响的兄弟姐妹），我发现其他答案说使用 translateZ(0) 但是当我添加它时 object-fit: cover 不再起作用（整个图像被拉伸到适合 div).

有什么想法可以在 Chrome 中实现吗？（object-fit 和 transform 在单独使用时都按预期工作。）

Answer 1

经测试，backface-visibility、translateZ、translate3d似乎需要防止变换闪烁，中断object-fit、background-size。如果您的目标是使图像居中，那么您可以使用 position: absolute 和 translate，如下例所示。

div.category {
    width: 80%;
    height: 150px;
    margin: 20px;
    position: relative;
    overflow: hidden;
}
img {
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.12); /* order is important here*/
    backface-visibility: hidden;
    transition: transform 0.35s;
}
div.category:hover img {
    transform: translate(-50%, -50%) scale(1);
}

<div>
    <div class="category">
        <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
    </div>
    <div class="category">
        <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
    </div>
    <div class="category">
        <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
    </div>
</div>

http://jsfiddle.net/moogs/r1s1rtLk/4/

Answer 2

您可以创建一个额外的层，使用 class 环绕，并使用它来制作缩放效果

你们的风格相同，但重新分配

html, body {
    width: 100%;
    height: 100%
}

div.category {
    width: 80%;
    height: 150px;
    background-color: yellow;
    margin: 20px;
    overflow: hidden;
    position: relative;
}

.wrap {
    position: absolute;
    height: 100%;
    width: 100%;
}

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

/* Transformations */

div.category .wrap {
    transition: transform 0.35s;
    transform:  scale(1.12);
}

div.category:hover .wrap {
    transform:  scale(1);
}

<div>
    <div class="category">
        <div class="wrap">
        <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
        </div>
    </div>
    <div class="category">
        <div class="wrap">
        <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
        </div>
    </div>
    <div class="category">
        <div class="wrap">
        <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
        </div>
    </div>
</div>

CSS: 在 webkit 上一起使用 object-fit 和 transform 时的问题

CSS: Problems when using object-fit and transform together on webkit

css

webkit

transform

scale