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的图像上时，它会恢复到旧的宽高比，进行缩放，然后返回到正确的宽高比。这导致一些非常奇怪的视觉效果，可以在下面的小提琴中看到;

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

删除对象：在#content上覆盖将解决缩放问题，但会扭曲纵横比。

知道怎么解决这个问题吗？

Answer 1

请检查您需要做的就是“max-width”的宽度，并删除对象：

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（sans js）：http://jsfiddle.net/pqs4vef7/2/

使用对象适合时悬停缩放效果：覆盖

2 个答案: