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，否则从百分比到初始的转换很棒。我需要使用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="https://i.stack.imgur.com/3NQEB.png?s=328&g=1">
</div>

希望这对你有所帮助。

CSS从百分比过渡到初始

1 个答案: