説明
次のメソッドを直接ブラウザにコピーして、ブラウザサイズを実行、ズーム、ドラッグして、効果を確認できます。
1.ポジショニングを使用して達成する
<!doctype html>
<html>
<style>
.wrapper{
position : relative;
background: #ccc;
width: 10%;
padding-bottom : 20%;
}
.inner{
position : absolute;
top : 0; left : 0; right : 0; bottom : 0;
}
</style>
<head>
<body>
<div class="wrapper">
<div class="inner">
这是内容
</div>
</div>
</body>
</html>
秘密があることでpadding-bottom:20%、それはpadding-bottom相対的な幅である。つまり、全体のWrapper高さが等しくされpadding-bottom、高さ、そしてWrapper何の内容の高さはありません。私たちは、答えは絶対位置のですか？内容の高させずに、それに準備DIV配置するためにどのようWrapperなスタイルを持っているposition:relative便利なサブ要素を比較しWrapper、左の頂点の位置。
次に、擬似要素を使用します
<!doctype html>
<html>
<style>
.wrapper {
background: #ccc;
width: 10%;
}
.wrapper::before {
content: '';
padding-top: 200%;
float: left;
}
.wrapper::after {
content: '';
display: block;
clear: both;
}
</style>
<head>
<body>
<div class="wrapper">
这是内容
</div>
</body>
</html>
メソッドの由来：CSSの30秒。
padding-topwrapper上記::before擬似要素は、要素の高さは、その幅の比率に等しくなります。200%したがって、要素の高さは常に200%幅であり、応答の正方形を作成します。このメソッドにより、コンテンツを通常は要素内に配置することもできます。
総括する
2つの方法の効果は同じです。試すことができます。ブラウザウィンドウのサイズを調整して、要素の比率が変更されていないことを確認します。
個人的には、divのネストを減らすことができる方法2の使用をお勧めします。しかし、方法1の方が互換性があります
リファレンス：http://www.fly63.com/article/detial/1291?type=3