css自己动调整图片大小的方法
墨初 Web前端 623阅读
在网页中插入图片时,可能由于图片的尺寸问题会在页中造成图片大小不一致的情况。为了避免这样情况,我们可以使用CSS样式代码对图片的大小进行调整,让它们自适应图片父元素的大小。
CSS调整图片大小的方式
方法1:
如果想要多张图片统一大小,可以用CSS给他们一个统一的宽度与高底。
例:
<style> img { width: 270px; height: 180px; } </style> <img src="https://www.73so.com/artimgs/css_1.png" > <img src="https://www.73so.com/artimgs/css_2.png" >
上面的CSS样式代码规定的图片的宽度为270个像素而高度为180个像素。
方法2:
也可以规定图片的高度与宽度根据父元素的高与宽进行定义。
<style> div{ width: 200px; height: 150px; } img { width: 100%; height: 100%; } </style> <div> <img src="https://www.73so.com/artimgs/css_1.png" > </div> <div> <img src="https://www.73so.com/artimgs/css_2.png" > </div>
以上就是CSS定义调整图片大小的方法,大家可以参考一下。