hi,欢迎访问本站!
当前位置: 首页Web前端正文

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定义调整图片大小的方法,大家可以参考一下。

标签:
声明:无特别说明,转载请标明本文来源!
相关推荐