HTML中保持DIV寬高比

在HTML中保持DIV的寬高比,能夠作一張指定寬高比的圖片,把它放到自動寬高的DIV裏面,以後這個DIV就能夠保持圖片的寬高比,這種方法要作圖,還浪費網絡資源; 還有一種方法能夠經過CSS實現,下面就來介紹如何經過CSS來保持DIV寬高比

以 4:3 爲例, 想要DIV按照這個寬高比,在網頁中隨着橫向的伸縮,在縱向上等比伸縮, 用一個外圍DIV來包裹它,且將這個外圍DIV稱之爲Wrapper, Wrapper 的CSS樣式以下:

.wrapper {
  position : relative;
  padding-bottom : 75%;
}

這個Wrapper的寬高比就是 4:3 , 其中的奧妙就在於padding-bottom:75%, padding-bottom 是相對寬度的.也就是整個Wrapper的高度等於padding-bottom 的高度,Wrapper 沒有內容高度.沒有內容高度如何往其中放置咱們準備的DIV呢?答案是 絕對定位, 因此Wrapper的樣式中有position:relative, 方便子元素相對Wrapper的左頂點定位.

最後咱們把想要保持寬高比的DIV放到Wrapper中去, 這個DIV且稱之爲Inner, 下面是這個Inner的CSS樣式:

.inner {
  position : absolute;
  top : 0; left : 0; right : 0; bottom : 0;
}

結束.