HTML 背景图布满整个div

在编写HTML代码时，偶尔会遇到这种情况，我们要展示的背景图的大小与实际的div大小不一致（此时的背景图是静态资源而非接口请求数据）。

设置背景图的css是background: url(...) 假设现在有一张背景图的长宽是100px*100px， 而外层的div大小是400px*400px，那么根据以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div {
            margin: 0 auto;
            width: 400px;
            height: 400px;
            font-size: 28px;
            color: tomato;
            text-align: center;
            background: url('./1.jpg');
            border: 1px solid ;
        }
        .img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="div">
        侧耳倾听
    </div>
</body>
</html>

得到的结果是这样的（文本内容只是展示，实际中会有更多信息）：

 只需要给div添加一行代码即可解决问题：

background-size: 100% 100%;

可看到图片已经铺满整个div区域。但这时候图片失真了。如果图片的长宽比例与div一致，自己打开画图工具调整一下就好，如果不一致，最好还是向UI再要一张合适的UI图吧。。。

posted @ 2020-12-07 10:18  JonnyOu1012  阅读(184)  评论(0)  编辑  收藏  举报