欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

让图片作为背景自适应填充至div中

程序员文章站 2024-02-04 20:18:22
...

想要实现的效果

有一个div,大小会随着屏幕的分辨率而自适应调整,现在要在其中设置一张背景图片,图片完全填充div,同时也需要图片自适应的调整大小

实现方法

css确实不熟悉,只能查找资料,通过查找的资料有提通过设置background-size:containbackground-size:cover,但这两种效果都不是我想要的效果,不能让图片完全填充背景,最后发现:如果直接设置background-size:100% 100%;恰好是自己想要的效果,且随着屏幕分辨率的变化,也能做到随着div大小的变化自适应填充
关键的几个参数设置:

background-image: url(“./example.png"); //背景图片
background-repeat: repeat/no-repeat; //平铺方式
background-size:100% 100%; //尺寸大小,或者填充方式,关键

最后因为在使用contain和cover时也发现他们各自适用的场景,这里也顺带的稍微总结下:

1、background-size:contain;

适用于需要以填充的div或者其他元素的最短的边来自适应填充背景图片的,如div的宽高为:w=200px,h=100px,则会将图片高调整为h=100px来填充,宽则是按等比自适应调整,即图片不会发生变形

2、background-size:cover;

适用于需要以填充的div或者其他元素的最长的边来自适应填充背景图片的,如div的宽高为:w=200px,h=100px,则会将图片宽调整为w=200px来填充,高则是按等比自适应调整,即图片不会发生变形

3、background-size:100% 100%;

适用于需要将div或者其他元素完全填充来自适应填充背景图片的,如div的宽高为:w=200px,h=100px,则会将图片的调整为w=200px,h=100px来填充,即图片会发生变形

相关标签: 解决问题