css如何设置背景图片自适应大小
荣姿康 2023-07-08编程经验81
/*第一段:使用background-size属性*/.example1{background-image:url('example.jpg');background-size:contain;ba
第一段:使用background-size属性
background-size属性可以指定图片的尺寸大小,其中的值可以是
contain
或cover
,分别表示图片完整展示或按比例缩放并填满容器。使用background-repeat属性可以防止图片平铺重复。height属性则为容器设定高度。
<div class="example1"></div>
第二段:使用background-image的属性值
通过设置background-image的属性值为url('example.jpg'),然后使用background-repeat和background-position分别去除图片平铺重复以及将图片居中缩放,最后设定容器高度即可。
<div class="example2"></div>
第三段:使用CSS3的object-fit属性
CSS3的object-fit属性可以让img标签和背景图片一样容易自适应大小。首先设定容器的高度和宽度,然后将img标签的object-fit属性设置为cover,意思是将图片缩放以填充整个容器。
<div class="example3"> <img src="example.jpg" alt="example image"> </div>
第四段:使用CSS3的background-clip和background-origin属性
这种方式为利用CSS3的背景图像来达到替换img标签的效果。需要将图片作为容器的背景,并设定背景图片的大小。将background-clip和background-origin属性都设为content-box,保证背景图片不会延伸到border-box或padding-box区域,而是仅出现在content-box区域。
<div class="example4"></div>
很赞哦! (6)