それらを含むコンテナのサイズの割合として。 これにより、ブラウザウィンドウのサイズを変更するときに、すべての要素のサイズが比例して変更されます。 ページレイアウトなど、水平方向の寸法のみが指定されている場合、要素を水平方向に正しく配置することが重要である場合、要素の実際の水平方向のサイズを明らかに予測できます。 ただし、おそらく、垂直方向の寸法について事前に何も言えません（もちろん、高さが明示的に設定されていない場合）。 ここから次のタスクが続きます-要素の比率を維持する方法は？
練習からの簡単な例。 ページは3つの列で構成されています：左の垂直メニュー、画像、右の垂直メニュー。
ウィンドウのサイズを変更するとき、画像は左メニューと右メニューの間のスペースに残り、伸びる（縮小する）はずです。 次に、メニュー項目は正方形の領域で表される必要があり、ウィンドウのサイズが変更されても正方形のままになります。
ページに2つの順序なしリストと中央の画像を表示できます。
<ul class="left-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul> <div class="picture"> <img src="img/fox.jpg"> </div> <ul class="right-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul>
リストの幅を4％に設定します。
.left-navigation, .right-navigation { width: 4%; list-style: none; float: left; padding-left: 0; margin: 0; } .right-navigation { float: right; } .left-navigation li, .right-navigation li { border: 1px solid black; cursor: pointer; }
写真92％：
.picture { box-sizing: border-box; padding: 30px; width: 92%; float: left; } .picture img { width: 100%; }
その結果、ページは次のようになります。
ウィンドウのサイズが変更されると、画像とメニューのサイズが変更されますが、
メニュー項目が正方形ではないことがわかります。 これは当然のことです。なぜなら、メニューの幅をパーセンテージで設定し、アイテムの高さをレンダリングアルゴリズムに任せるだけだったからです。
もちろん、メニュー項目のサイズを絶対単位で明示的に設定できます。 それらは目的の正方形の形状を取得しますが、レイアウトは適応プロパティを失います。 高さをパーセンテージで示すだけです：
width: 4%; height: 4%;
また、親要素（およびこの場合は本体）の幅と高さは、原則として同じではないため、解決策ではありません。
この問題の解決策は、マークアップ要素内のパディングがパーセンテージで表現された場合、この要素の幅に対して計算されるという多少逆説的な事実に基づいています。 パラドックスは、この文が水平インデントだけでなく真実であることです：
padding-left, padding-right
、ただし垂直インデント：
padding-top, padding-bottom
次に必要なのは、疑似セレクターの後の::です。 幅全体に引き伸ばされた要素内に高さゼロの擬似要素を追加します。 この疑似要素のpadding-topまたはpadding-bottomを100％に設定すると、インデント値は親（この場合はli）の幅に等しく設定されます。
.left-navigation li:after, .right-navigation li:after { content: ''; display: block; padding-bottom: 100%; }
その結果、引き伸ばされた要素の高さはその幅と等しくなり、メニュー項目は正方形になります。
メニュー項目内にコンテンツを追加するには、絶対配置を使用します。
.left-navigation li a, .right-navigation li a { position: absolute; margin-left: 2%; margin-top: 2%; } .left-navigation li a img, .right-navigation li a img{ transform: translate(-50%, -50%); }
その結果、ページは目的の形式になります。
そして最も重要なことは、ウィンドウのサイズが変更されても、メニュー項目は正方形のままです。