CSS：在webkit上使用对象适配和一起变换时的问题 [英] CSS: Problems when using object-fit and transform together on webkit

问题描述

我试图在 img 元素上同时使用css属性 object-fit：cover 我的图像填充它的包含 div 和 transform：scale（xx）使图像缩小悬停。 p>

这里是一个示例小提琴： 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：

 code> ..... 
 
 div.category img {
 display：block; 
 height：100％; 
 width：100％; 
 object-fit：cover; 
 object-position：center; 
} 
 
 / *转换* / 
 
 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）但是当我添加这个 fit：cover 不再工作了（整个图像被拉伸以适合 div ）。

有什么想法如何使这项工作在Chrome？ （ object-fit 和 transform 都可以正常工作。）

$在测试后，看起来背面可见性， translateZ / code>和 translate3d ，它们是防止变换闪烁所必需的，break object-fit code> background-size 。如果你的目标是使图像居中，那么你可以像下面的例子中那样使用 position：absolute 和 translate 。 / p>

  div.category {width：80％; height：150px; margin：20px;位置：相对; overflow：hidden;} img {display：block; width：100％; position：absolute; top：50％;左：50％; transform：translate（-50％，-50％）scale（1.12）; / *顺序在这里很重要* / 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/

I'm trying to use both the css property object-fit: cover on an img element to have my image filling its containing div and transform: scale(xx) to have the image zooming out on hover.

Here is a sample fiddle: https://jsfiddle.net/96kbuncq/
Edit: sample with real images: 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);
}

This is working fine in Firefox but in Chrome and Opera I have the following problems:

• When hovering the first div, the two others are also affected (and when hovering the second one, the third one is also affected),
• When hovering a div, the image inside is first entirely displayed (we can see the whole image stretched to fit inside the div) before being correctly zoomed out and "covering" the div.

I don't know how to solve those problems.

About the first problem (affected siblings), I've found other answers saying to use translateZ(0) but when I add this the object-fit: cover is not working anymore (the whole image is stretched to fit inside the div).

Any ideas how to make this work in Chrome ? (Both the object-fit and transform are working as expected when used without the other.)

解决方案

After testing it seems that backface-visibility, translateZ, and translate3d which are required to prevent the transform flicker, break object-fit and background-size. If your goal is to center the image then you can use position: absolute and translate like in the example below.

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/

这篇关于CSS：在webkit上使用对象适配和一起变换时的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！