css背景圖撐開盒子高度

需求：

給定1980px*1080px背景圖，在網頁顯示時，圖片寬度等於瀏覽器寬度，高度根據原圖比例顯示對應高度，假設圖片最小寬度設置爲1024px，則最小高度爲1024/(1980*1080)=576px

問題：

背景圖，是做爲容器的一個屬性存在的，並非做爲容器的內容，除了寬高padding這類之外的屬性，其餘的通常不能撐開容器，想要用這張圖撐開容器的話，在現有知識下只能想到用img標籤插入這張圖，撐開容器達到模擬背景的目的，固然這麼作的話其餘元素只能選擇浮動或者定位來排版了。

解決：

圖片容器寬度是100%(瀏覽器寬度)，高度是after用padding-bottom:100%撐開的，100%就是直接根據【上級寬度】的數值計算的，因此這樣只能撐出個正方形，須要長方形改變padding-bottom：50%這樣使用上一級50%的寬度做爲高度就好了。在此需求中計算得：1080/1980=56%；可是，此時若要在該容器內放置內容須要絕對定位，不然會把圖片高度撐開過多。

代碼：

.main {
  min-width: 1024px;
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}

.main::after {
  content: "";
  display: block;
  /*這裏的padding =  height / width*/
  padding-bottom: 56%;
}

參考資料：

• css背景圖撐開盒子高度
• 圖片做爲div的背景圖片，div幾乎沒有內容，div如何被撐起來並自適應的？
• 在未設置height和width的DIV中插入背景圖片，如何修改代碼，使DIV大小適應背景圖片？
• 設計網頁，常見的寬度是多少像素？