通常來講，
設計師們喜歡把banner設計成全屏（1920px或以上）
主題內容控制在一定的范圍內一般在1200px左右
這樣的設計即可以在寬屏上的表現很好、也能向下兼容一些小屏幕的設備；
如下圖（所說的分辨率是實際的展示尺寸的寬度、請勿較真）
那么問題來了；
如果當分辨率小於1200、 拿bootstrap來說、 規定的幾個響應尺寸為 小於768px 小於996px 小於1200px 大於1200px這4種尺寸
這時候該如何處理尺寸,比如當前瀏覽器寬度為1000px時，我們會發現主視覺區域被吃掉了一小部分，再更小的分辨率下吃掉的更多；當然這不是我們想要的結果
方法1：
<img src="768banner.jpg" class="visible-xs" />
<img src="996banner.jpg" class="visible-sm" />
<img src="banner.jpg" class="visible-md visible-lg" />
優點：好理解、而且可以針對不同的分辨率下設置不同的顯示效果；
缺點：如果不用js控制、會一次性加載3張圖片、這對於移動設備來說可能是個災難；
方法2（推薦）：
利用calc計算寬度： 比如圖片寬度為 1920px、主視覺區域為1200px 當前分辨率是1000px
公式為：圖像寬度/主視覺寬度 * 100%
1920px/1000px*100%；
但是，calc的乘法和除法又這樣的限制
*乘法，乘數中至少要有一個是
<number>類型的/除法，被除數（/右面的數）必須是
<number>類型的--引用自MDN
索性就直接算出來 1920px/1000px*100% = 1.6*100%;
這樣的設置會使主視覺區域跟隨着窗口寬度來變化、始終等比縮放！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="scripts/html5shiv.min.js"></script>
<script src="scripts/respond.min.js"></script>
<![endif]-->
</head>
<body>
<style>
ul,li{margin:0;padding:0;}
ul{}
.banner{position: relative;overflow:hidden;}
.banner img{
position: relative;
left: 50%;
transform: translate3d(-50%, 0, 0);
width: calc(1.6*100%);
}
</style>
<div class="banner">
<ul>
<li>
<a href="#">
<img src="banner.jpg" />
</a>
</li>
</ul>
</div>
</body>
</html>