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;
}

下面是一个jsFiddle，展示了它在实际操作中的样子。

问题：除非不能使用最大宽度，否则CSS从百分比到初始值的转换非常好。我需要使用最大宽度来实际限制宽度，所以我不能执行这里建议的操作。我不能使用宽度，因为所有的图像都有不同的宽度。

我尝试过的：使用宽度、边距和高度。我还尝试过使用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="https://i.stack.imgur.com/3NQEB.png?s=328&g=1">
</div>

希望这能帮助你。！