手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

前端 处理图片缩放的方法css

时间:2024-10-12 12:49:04

1、我们先在html里添加一个img图片标签。

前端 处理图片缩放的方法css

2、运行页面后,这是完整显示图片大小的。图片大概是400x260左右的大小。

前端 处理图片缩放的方法css

3、要进入图片缩放,我们可以在css样式氇筐塘瓠里设置图片的宽度和高度,但不要宽和高都设置了,比如这里都设置为100px。

前端 处理图片缩放的方法css

4、设置后,看下页面可以看到图片现在变形了。

前端 处理图片缩放的方法css

5、正确的方法应该是只设置其中一个,比如我们设置宽度为100px,高度设置为自动就行了。

前端 处理图片缩放的方法css

6、这里设置后的效果,图片并没有变形。

前端 处理图片缩放的方法css

7、同样,如果是限定高度的大小,就设置宽度为自动。这样图片同样不会变形。

前端 处理图片缩放的方法css
前端 处理图片缩放的方法css
© 手抄报圈