CSS 的奇技工巧：4行屬性寫出等比例盒子

一個項目中須要用到一個廣告位的輪播圖效果，而這個輪播圖位置須要根據不一樣設備的尺寸進行縮放從而保持相同的比例。

最開始使勁琢磨發現用 width + height 屬性是實現不了這種效果的，非得用 JS 才能達到這種效果嗎？終於發現有前人早已解決過這個問題，這裏權當本身吸取學習，所以記錄下來。

HTML

<div class="box">
    <img src="...">
</div>

CSS

.box
{
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

img
{
    width: 100%;
}

演示效果

---

仔細想想這不過是 CSS 中最基礎的內容，沒有什麼新穎華麗的內容。可是其中值得思考的東西頗多，不妨讀者也想想：

• 爲何父元素 .box 的 height 屬性要設置爲 0
• 子元素 img 爲何不設置 height 屬性

注意

padding 屬性的繼承關係