javascript - 使用 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;
}

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

我遇到的问题是将此技术与 object-fit: cover 结合使用。我希望图像适合固定大小的框(高度:250 像素；宽度:25%)，同时保持其纵横比(使用 object-fit: cover 实现)。

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

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

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

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

Answer 1

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/