CSS实现图片大小变换

我在使用CSS实现鼠标经过时改变图片大小使用了改变width属性和transform属性，发现有个问题，使用width属性改变图片大小时，图片在页面在页面占用的空间也会跟着变化从而影响周边的其他内容的呈现，导致页面变形；而使用transform变换属性则没有这些问题，就好像图片是在一个独立的层面。样式中还是用了过渡属性transition，这样可以使变换没有那么突兀。

示例代码：

img {

width: 20vw;

transition: all .5s; /* 四个参数：需要过渡的CSS属性  过渡时间  过渡形式  过渡开始的延迟时间 */

}

img:hover {

transform: scale(1.5);

/* width: 30vw; */

}