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>