使用一個隱藏的圖片來實現

這個方法是我最推薦的，因為不需要考慮任何兼容性，PC移動完美運行。除了增加了一個dom結構，但是相對與一個頁面成百上千的代碼來說，不值一提

我們知道，div容器如果不給定高度，它的高度會隨著容器內部的元素變化而撐大，這個時候，我們在容器內部添加一張符合我們寬高比例的圖片，給圖片設置寬度100%；高度auto。不管我們的父容器如何變化，內部的img寬度都是100%，圖片是會嚴格按照比例i自動縮放的，相應的，我們內部的子容器的蓋度也就會按照比例縮放了

#container {

width: 100%;

}

.attr {

background-color: #008b57;

}

.attr img{

width: 100%;

height: auto;

}

如果你覺得增加img標簽多發了http請求，那么請繼續往下看，神器base64圖片編碼幫你解決這個問題，由于我們的的圖片只需要一個人形狀而已，所以可以大膽的壓縮，然后編碼，連http請求都省了，嘎嘎~

使用vmin

這個單位也是css3的新單位(css3大法好~)，我們將父容器的寬度和高度定義為相同的vmin，這樣父容器的高度和寬度就是相同值，這個時候，子容器的寬高值設為百分比，不管父容器大小如何變，子容器的高度和寬度比都是不會變的。

單位 說明

vw 相對于視窗的寬度

vh 相對于視窗的高度

vmin 相對于視口的寬度或高度中較小的那個被均分為100單位的vmin

vmax 相對于視口的寬度或高度中較大的那個被均分為100單位的vmax

#container{

width: 100vmin;

height: 100vmin;

}

.attr {

width: 50%;

height: 50%;

background-color: orange;

}

使用cale

cale()是css3的心特性，它的值可以是一個表達式，這里我們關心的是。calc中的百分比也是按照父容器的百分比垃圾算的

.attr{

width:50%;

height: calc(50%);

}

padding-bottom實現

這里方法非常巧妙，由于padding-bottom的屬性值百分比是按照父容器的寬度來計算的，所以這里我們設置容器寬度為父容器的50%；padding-bottom也為50%；就都是父容器寬度的50%；顯示出來就是一個完美的正方形了

看個代碼：

#container {

width: 80%;

height: 500px;

}

.attr {

width: 50%;

height: 0;

padding-bottom: 50%;

background-color: #008b57;

}

總結

以上是生活随笔為你收集整理的html高度随宽度编号,纯css实现容器高度随宽度等比例变化的四种解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

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