div设置背景图片自适应

最新推荐文章于 2023-08-25 06:03:03 发布

qiweilong123456

最新推荐文章于 2023-08-25 06:03:03 发布

阅读量1.1w

点赞数 6

分类专栏：前端文章标签： html css css3 html5

本文链接：https://blog.csdn.net/qq_33745371/article/details/113694312

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度

效果：
宽度变窄，高度相应比例变窄
在这里插入图片描述
宽度变宽，高度相应比例变宽

高度与宽度无法直接自适应，需要找一个中间的属性相串联。
宽度的自适应是根据viewport的width来调整的。
padding
padding是根据viewport的width来调整的。
padding-top和padding-bottom也是根据viewport的width来跳转的。

那么我们可以通过 padding-bottom属性来间接和width进行自适应。
padding-bottom的值 = (图片高/图片宽)
假设图片像素为1920*1080，则padding-bottom值 = （1080/1920） = 56.25%

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="backgroundImg">

    </div>
</body>
<style>
    body{
        margin: 0;/*去除div和body之间的间隔*/
    }
    #backgroundImg{
        width: 100%;
        background: url("pc.jpg") no-repeat;/*no-repeat:背景图将不会被重复*/
        background-size: cover;/*背景图片放大到适合元素容器的尺寸，图片比例不变.背景图像的某些部分可能无法显示在背景定位区域中。*/
        padding-bottom: 56.24%;/*起到的效果是让宽度与高度关联,具体数值=(图片高/图片宽)*/
        /*图片分辨率为1202*676 约为56.24%*/
    }
</style>
</html>

qiweilong123456

关注

6
点赞
踩
45

收藏

觉得还不错? 一键收藏
打赏
3
评论
div设置背景图片自适应

div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度效果：宽度变窄，高度相应比例变窄宽度变宽，高度相应比例变宽高度与宽度无法直接自适应，需要找一个中间的属性相串联。宽度的自适应是根据viewport的width来调整的。paddingpadding是根据viewport的width来调整的。padding-top和padding-bottom也是根据viewport的width来跳转的。那么我们可以通过 padding-bottom属性来间接和width进行自适应。p
复制链接

扫一扫