无法运行过渡 CSS 属性

Question

我试图弄清楚过渡在 css 中是如何工作的。我希望在我的示例中看到图像的平滑宽度变化（当我调整浏览器窗口的大小时），但它不起作用。你能指出我的错误吗？

div{
    display: inline-block;
}
img {
    width:25%;
    -webkit-transition: width 20s; /* For Safari 3.1 to 6.0 */
    transition: width 20s;
}

<div>
    <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris">
    <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris">
</div>

Answer 1

解决方法是将% 替换为vw

将width: 20%;替换为width: 20vw;就可以了。

div{
	display: inline-block;

}
img {
	width: 20vw;
    -webkit-transition: width 20s; /* For Safari 3.1 to 6.0 */
    transition: width 20s;
}

<div>
    <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris"/>
    <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris"/>
</div>