c语言编程笔录

您现在的位置是:首页 > 编程 > 编程经验

编程经验

css如何设置背景图片自适应大小

荣姿康 2023-07-08编程经验81
/*第一段:使用background-size属性*/.example1{background-image:url('example.jpg');background-size:contain;ba

第一段:使用background-size属性

background-size属性可以指定图片的尺寸大小,其中的值可以是 containcover,分别表示图片完整展示或按比例缩放并填满容器。使用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属性

example image

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>
    

文章评论