css如何實作一個自適應容器

目標：

實現一個寬度自適應，高度為寬度一半的容器。

一、思考如何實現

這個問題類似於：我們在行動端頁面，上面有一張寬度100% 的圖片，如果我們沒設定高度，則圖片會根據原有尺寸，等比縮放。

我們可以藉助這個想法，根據元素高度，來為元素設定一個對應比例的高度即可。

（推薦教學：CSS入門教學）

二、實作方法1 - 透過vw 視窗單位實現

所謂視口單位(viewport units)是相對於視口(viewport)的尺寸而言， 100vw 等於視口寬度的100% ，即1vw 等於視口寬度的1%。

我們就可以利用這個特性，實現行動端的寬高等比自適應容器。

HTML程式碼：

<div class="box">
    <img  src="http://images.pingan8787.com/2019_07_12guild_page.png" / alt="css如何實作一個自適應容器" >
</div>

css程式碼：

*{
    margin:0;
    padding:0
}
.box{
    width:100%;
    height:51.5vw
}
.box img{ 
    width:100%; 
}

為什麼 .box 高度為 51.5vw 呢？

原因是圖片原來的尺寸是 884 * 455 的寬高比例，即 455 / 884 = 51.5% 。

這個方法相比原來圖片的等比縮放，有個優點：無論圖片是否載入成功，容器高度總是計算完成，不會造成頁面抖動，也不會造成頁面重繪，從而提升性能。

下面看看這種情況下，圖片載入成功與失敗的對比：

#三、實作方法2 - 透過子元素padding 實作

透過設定子元素的padding 屬性來實現，是比較常用，也是效果比較好的一種，這裡需要理解的是： 子元素的padding 屬性百分比的值是先對父容器的寬度而言。

這裡看下面程式碼與效果圖理解下：

HTML程式碼：

<div class="box">
    <div class="text">我是王平安，pingan8787</div>
</div>

css程式碼：

.box{
    width: 200px;
}
.text{
    padding: 10%;
}

分析：

這裡我們將父容器.box 寬度設定為200px ，子元素.text 的padding:10% ，因此.box 的padding 計算結果為20px ;

#接下來結合主題，我們利用這個原理，來實現等比例的問題：

HTML程式碼：

<div class="box">
    <div class="text">
        <img  src="http://images.pingan8787.com/2019_07_12guild_page.png" / alt="css如何實作一個自適應容器" >
    </div>
</div>

css程式碼：

.box{
    width: 100%;
}
.text{
    overflow: hidden;
    height: 0;
    padding-bottom: 51.5%;
}
.box .text img{
    width: 100%;
}

這裡.text 的padding-bottom: 51.5%; 也是按照第一個方法，用圖片原始尺寸的寬高比計算出來的，需要注意，這裡將.text 設定height: 0; 會出現高度比實際高的問題，因此為了避免這個情況，就需要設定height: 0; 。

相關影片教學推薦：css影片教學

#

以上是css如何實作一個自適應容器的詳細內容。更多資訊請關注PHP中文網其他相關文章！