页面中图片大小自适应问题，避免留白

最新推荐文章于 2024-12-13 15:18:21 发布

原创最新推荐文章于 2024-12-13 15:18:21 发布 · 3.8k 阅读

CC 4.0 BY-SA版权

文章标签：

11 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍了三种让图片在不同屏幕尺寸下自适应显示的方法：使用div包裹img并设置max-width和max-height，利用背景图片结合background-size属性，以及采用flex布局实现图片宽度100%且高度自适应。

第一种：

div 包着 img

img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}

第二种：

背景图片

style="background-image: url(${user.headimgurl});background-size: cover; "

下面是background-size 的各个属性：

length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

第三种：

div 设置flex布局，img设置width： 100%

相当于宽度固定，图片宽度全部撑开，高度自适应，避免留白
样式参考w3school：https://www.w3schools.com/css/css3_flexbox.asp