那麼css如何實現高度height隨寬度width變化保持比例不變呢？即給定可變寬度的元素，它將確保其高度以響應的方式保持成比例(即，其寬度與高度的比率保持恆定)。
下面以高寬 2:1 為例，通過2種方式來實現這種效果。
方式一：利用定位實現
position : relative;
background: #ccc;
width: 10%;
padding-bottom : 20%;
}.inner
方式二：利用偽元素
background: #ccc;
width: 10%;
} content: '';
padding-top: 200%;
float: left;
} content: '';
display: block;
clear: both;}
padding-top 在…上::before 偽元素使元素的高度等於其寬度的百分比。200% 因此表示元素的高度始終為200% 的寬度，建立乙個響應正方形。 此方法還允許內容正常放置在元素內部。
總結二種方式實現的效果都一樣，大家可以試一下，調整瀏覽器視窗的大小以檢視元素的比例保持不變。
個人推薦使用方法二，這樣可以減少div的巢狀。不過方法一的相容更好
css實現內容不相同的左右兩個div等高
現在有兩個div左右排列，但是兩個div的內容不相同，如何設定兩個div的css做到在兩個div等高排列呢？下面是網上找的3種實現方法，覺得很有代表性，所以索性收藏起來。通過父元素設定overflow hidden,div自己設定padding bottom和margin bottom來實現。lef...
css實現內容不相同的左右兩個div等高
現在有兩個div左右排列，但是兩個div的內容不相同，如何設定兩個div的css做到在兩個div等高排列呢？下面是網上找的3種實現方法，覺得很有代表性，所以索性收藏起來。通過父元素設定overflow hidden,div自己設定padding bottom和margin bottom來實現。lef...
CSS如何設定div半透明效果
css如何設定div半透明效果 設定元素的透明度在很多應用中都有使用，下面就介紹一下如何設定乙個元素為半透明，其他的透明效果自己衍伸就可以了。例項如下 opacity屬性所以標準瀏覽器都支援，但是ie8和ie8以下瀏覽器不支援此屬性，於是就使用filter alpha opacity 50 進行相容...