背景图片，banner图片随屏幕大小变化而变化

最新推荐文章于 2022-07-30 19:21:14 发布

满舰饰v

最新推荐文章于 2022-07-30 19:21:14 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/qq_40893035/article/details/111832239

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1 . 背景图片变化

业务背景：一个固定高度，固定最小宽度的横幅式banner
例子网站

<!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 type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .wrap {
                min-width: 960px;
                height: 540px;
                background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ff66c44a33a6c0dce570774aa1ef2d032a0eb4eba.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611715042&t=737df3c8907cf62ef38dd9652f1883c6');
                background-size: cover;
            }
            
        </style>
    </head>
    <body>
        <div class="wrap">
        </div>
    </body>
</html>

2 . banner图片，随着屏幕变宽而变大变宽

适用场景：一般多为移动端banner图片

<!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 type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .wrap {
                min-width: 480px;
                height: 270px;
            }
            img {
                width: 100%;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ff66c44a33a6c0dce570774aa1ef2d032a0eb4eba.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611715042&t=737df3c8907cf62ef38dd9652f1883c6"/>
        </div>
    </body>
</html>