CSS背景图片自适应大小设置
背景图片自适应大小挺常见的需求，是做响应式设计时。只需要在 CSS 中设置background-size: cover;，背景图片就会自动调整，填充整个元素的背景区域，而且不会被拉伸变形。这个属性有用，尤其是在做全屏背景图或者需要动态适配不同屏幕的布局时。
如果你背景图保持比例填充并不失真，cover是最合适的选择，尤其适合那些有图片美观要求的项目。比如说做一个大屏网站或者首页，全屏的背景图片就能通过这个属性轻松适应各种设备大小，不用担心图片裁切或者变形的问题。
不过要注意，如果元素的宽高比和背景图片本身的宽高比差距较大，背景的一部分会被裁剪掉。所以这时如果不有裁切，可以考虑用background-size: contain;，这样会让图片自适应缩放，但不会被裁切。不过这会出现空白区域，看你具体需求了。
，背景图片自适应简单，只需要加上一行代码，基本就能搞定响应式背景图的问题。如果你还在为背景图片大小问题发愁，不妨试试这招，肯定会让你的项目看起来更顺畅。
文件大小：1.54MB
评论区