CSS：在 webkit 上同时使用 object-fit 和 transform 时的问题

Question

我正在尝试在 img 元素上同时使用 css 属性 object-fit: cover 来填充包含 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 时，其他两个也会受到影响（悬停在第二个时，第三个也会受到影响），
• 当悬停div 时，内部的图像首先完全显示（我们可以看到整个图像被拉伸以适合div），然后正确缩小并“覆盖”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

您可以创建一个额外的图层，使用类包装，并使用它来制作缩放效果

你的风格是一样的，但重新签名

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>