保持元素縱橫比

解決問題：頁面尺寸變化（resize）時保持頁面元素縱橫比

開源程序：Bootstrap

經常，我們會遇到這樣的需求，需要保持頁面上某些元素在頁面大小被改變重新渲染的時候，保持該元素區域的縱橫比不變。最常見的場景，比如頁面上顯示圖片的時候，希望始終保持圖片的縱橫比，哪怕圖片以縮略圖顯示?；蛘?#xff0c;在頁面上嵌入一段視頻的時候，希望嵌入的這個元素區域始終保持16:9或者4:3的比例。

在Twitter的開源前端框架中，專門針對后邊一個場景做了處理。

先看頁面使用代碼：

<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="…"></iframe> </div><!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="…"></iframe> </div>

這里比較值得一提的就是樣式類embed-responsive-4by3和embed-responsive-16by9的實現。看CSS代碼：

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {position: absolute;top: 0;bottom: 0;left: 0;width: 100%;height: 100%;border: 0; } .embed-responsive.embed-responsive-16by9 {padding-bottom: 56.25%; } .embed-responsive.embed-responsive-4by3 {padding-bottom: 75%; }

這里通過巧妙的使用padding-bottom這個屬性，來保持元素的縱橫比。比如embed-responsive-4by3，就是將width設置為100%，然后將padding-bottom設置為4:3對應的百分比，也就是75%就可以了。

這應該算是一個CSS Hack了。有很多人對其做過一些研究和討論，一并列出供參考：

http://www.quora.com/Web-Development/What-are-the-most-interesting-HTML-JS-DOM-CSS-hacks-that-most-web-developers-dont-know-about

http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div

其中提到一個簡單的示例程序，可以更容易看到其欲實現的效果：

http://jsbin.com/eqeseb/2/edit

總結

以上是生活随笔為你收集整理的保持元素纵横比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。