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

客官°小女子只卖身不卖艺 2022-12-31 03:26 192阅读 0赞

## 1 . 背景图片变化 ##

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

<!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>

[Link 1]: http://www.chuangjiangx.com/customerService