css - img 比例（放大效果）不起作用

Question

我有个问题。

我想在悬停时放大 img 但它不起作用。

<div>
<img src="https://www.apple.com/v/iphone/home/x/images/home/business_addit_large.jpg">
</div>

<style>
div {width: 500px; height: 300px; overflow:hidden}
img {display: block; margin:auto;width: 500px; height: 300px;}
img:hover {transform: scale(1,1);}
</style>

这是代码。

标签： css

Answer 1

div {width: 500px; height: 300px; overflow:hidden}
img {display: block; margin:auto;width: 500px; height: 300px; transition: transform 1s;}
img:hover {transform: scale(1.1);}

<div>
<img src="https://www.apple.com/v/iphone/home/x/images/home/business_addit_large.jpg">
</div>

这只是一个错字scale(1,1)=>scale(1.1)

另外，如果你想添加平滑效果，你应该transition这样添加。