CSS中需要用到的属性是max-width:100%;和height:auto;。这样通过这两个属性,图片就能够自适应大小了。img { max-width: 100%; height: auto;
CSS中需要用到的属性是max-width:100%;
和height:auto;
。这样通过这两个属性,图片就能够自适应大小了。
img { max-width: 100%; height: auto; }
上面的代码需要应用到图片外部,例如:
<div> <img src="example.jpg"> </div>
这样,图片就可以根据其父元素的大小来自适应调整大小。
如果图片想要在保持宽高比的同时进行缩放,可以使用object-fit
属性。
img { width: 100%; height: 200px; object-fit: cover; }
上述代码中,object-fit: cover;
会将图片进行缩放,使其填满父元素,但是保持其宽高比例。
这样,无论是图片还是其他容器,都可以轻松实现自适应大小的效果。
粉丝
0
关注
0
收藏
0