在HTML页面中,图片的显示方法有两种,分别为:img图片,background(背景)图片。根据不同的显示方法,有不同的改变图片大小的方法:
1、改变img图片的大小
想要改变img图片的大小,可以通过设置height和width属性实现。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <img src="/i/bg_flower.webp" style="width:50px;height: 50px;"> <br /> <img src="/i/bg_flower.webp" style="width:100px;height: 100px;"> <br /> <img src="/i/bg_flower.webp" style="width:200px;height: 200px;"> </body> </html>
效果图:
1、改变background(背景)图片的大小
想要改变background(背景)图片的大小,可以通过设置background-size属性实现,background-size 属性规定背景图像的尺寸。
<!DOCTYPE html> <html> <head> <style> body { background:url(/i/bg_flower.webp); background-size:63px 100px; -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-repeat:no-repeat; padding-top:80px; } </style> </head> <body> <p>上面是缩小的背景图片。</p> <p>原始图片:<img src="/i/bg_flower.webp" alt="Flowers"></p> </body> </html>
效果图:
以上就是css怎么改变图片大小?的详细内容,更多请关注易知道|edz.cc其它相关文章!