使用 Object-Fit 时的悬停缩放效果：Cover

Question

我的目标是在用户将鼠标悬停在我页面上的图像上时产生放大效果。我找到了具有这种效果的代码；

.transition {
    -webkit-transform: scale(1.6); 
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
}
#content {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}

当用户将鼠标悬停在图像上时向内容添加过渡。

我遇到的问题是将这种技术与对象匹配结合使用：覆盖。我希望图像适合固定大小的框（高度：250px；宽度：25%），同时保持其纵横比（使用 object-fit:cover 完成）。

但是，当用户将鼠标悬停在带有 object-fit:cover 的图像上时，它会恢复到原来的纵横比，进行缩放，然后再回到正确的纵横比。这导致了一些非常奇怪的视觉效果，可以在下面的小提琴中看到；

http://jsfiddle.net/y4yAP/982/

移除 #content 上的 object-fit:cover 将解决缩放问题，但会扭曲纵横比。

知道如何解决这个问题吗？

Answer 1

请检查您需要做的就是将宽度设置为“最大宽度”，然后删除对象适配：

www.jsfiddle.net/y4yAP/985/

Answer 2

object-fit:cover 没有得到广泛支持，我也不是很熟悉，不知道你是否需要使用它，但我尝试了一些我更熟悉的东西。

如果所有图像都是“风景”，那么您可以使用width: 100% 和height: auto，CSS 将为您保持纵横比。为了将图像定位在容器的中心位置，我将position: relative 应用于容器并将position: absolute 应用于#content。见：https://css-tricks.com/almanac/properties/p/position/

对于缩放，您可以在 CSS 中使用 #content:hover { ... }（除非您需要 jQuery 用于其他目的）。

HTML：

<div id="imageDiv">
    <img id="content" src="http://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png" />
</div>

CSS：

#content:hover {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.6); 
    -moz-transform: translateX(-50%) translateY(-50%) scale(1.6);
    -o-transform: translateX(-50%) translateY(-50%) scale(1.6);
    transform: translateX(-50%) translateY(-50%) scale(1.6);
}

#content {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}

#content {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#imageDiv { 
    position: relative;
    height: 250px;
    width: 450px;
    overflow: hidden;
}

FIDDLE（无 js）：http://jsfiddle.net/pqs4vef7/2/