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

Domin發表於2018-03-27
CSS

一個專案中需要用到一個廣告位的輪播圖效果，而這個輪播圖位置需要根據不同裝置的尺寸進行縮放從而保持相同的比例。

最開始使勁琢磨發現用 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 屬性的繼承關係

相關文章