在转换发生之前设置宽度

Question

我正在尝试使用悬停进行转换，这会使图像在1.5秒内增加其大小并延迟0.5秒，但由于某种原因宽度直接跳到其完整大小

<ul>
    <li>
        <h4>Silent Night</h4>
        <img src="assets/axe_silent_night_small.jpg"><a href="#">
        <h5>Add to Cart</h5>
    </li>
    <li>
        <h4>Silent Night</h4>
        <img src="assets/axe_kingmaker_small.jpg"><a href="#">
        <h5>Add to Cart</h5>
    </li>
</ul> 


.store img {
    margin:10px auto ;
    display: block;
    width:auto;
    height:170px;
    transition: width 1.5s, height 1.5s;
    transition-delay:0.5s;
}

.store img:hover {
    height:150%;
    width:150%;
    position:relative;
}

为什么会这样？

Answer 1

在变换中使用max-width，而不是宽度。并将max-width上的值设置为比你的盒子更大的值。