背景圖片，banner圖片隨螢幕大小變化而變化

滿艦飾v發表於2020-12-28

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>

相關文章