jquery - 从百分比到初始的 CSS 过渡

Question

我在做什么:拿这个:

#prod-img {
    width: 33%;
    max-width: 33%;
    margin-right: 3%;
    display: inline-block;
    float: left;
}

并尝试过渡到此:

#prod-img:hover, #prod-img:active{
    width: auto;
    float: none;
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

Here是一个 jsFiddle，展示了它的实际效果。

问题:除非您不能使用最大宽度，否则从百分比到初始值的 CSS 过渡非常好。我需要使用 max-width 来实际限制宽度，所以我无法执行建议的操作 here .我不能使用宽度，因为所有图像都有不同的宽度。

我的尝试:使用宽度、边距和高度。我还尝试使用 jQuery .addClass() 和 .css() 但是当我将鼠标悬停在上面时绝对没有任何反应。

期望的结果:一个丝般顺畅的 CSS 过渡，从小的、向左浮动的到大的、居中的任何尺寸的图像。

这是 HTML 的样子(我使用 angular 来处理大量这些图像):

<div>
    <img id="prod-img" src="{{product.url}}" alt="{{product.name}}" />
</div>

Answer 1

由于您没有提供相应的 HTML，我假设并创建了这样的东西。

#prod-img img{    
    margin:0px;
    width:33%;
    transition:2s;
    
}
#prod-img:hover img, #prod-img:active img{    
    width:400px; /*width must be specified*/
    transform:scale(1.2); /*scale as much as you need*/
    margin-left:calc(50% - 200px); /* Calculate the half of the image width */
}

<div id="prod-img">
    <img src="/image/3NQEB.png?s=328&g=1">
</div>

希望对您有所帮助!