Web開発者は、たとえばimg要素とは対照的に、サイズもアスペクト比も固定されていないHTML要素を操作するのが恥ずかしいことがよくあります。 多くの場合、これらのオブジェクトが応答して動作することを実現したいが、幅と高さの比率は維持されます。 CSSは、デフォルトでは、ここでは直感的なソリューションを提供していません。 しかし、垂直パディングプロパティの助けを借りて、あなたはあなたの目標を達成することができます。
グラフィックが必ずしも正方形である必要はない正方形の記事の画像の日常的な例を見てみましょうが、追加の労力なしで、とりわけ歪みなしでアスペクト比1：1で表示し、幅（したがって高さ）が応答して変化するようにします。すべきです。 次のコードを使用すると、CSSを使用して追加のマークアップなしでこれを行うのは非常に簡単です。:
1bc3a80de3db90cdf0535541236d95f2
結果で
しかし、なぜそれが機能し、他のアスペクト比をどのように作成できるのでしょうか？ これの鍵は、パディングプロパティにあります。これは、パーセンテージ値で指定され、常にWidthプロパティと同じ基本値（つまり、親要素の幅）に基づいています。 padding-leftとpadding-rightを使用すると、これは明らかであり、padding-topとpadding-bottomは驚くべきことですが、この場合は非常に役立ちます。
たとえば、16：9のアスペクト比が必要な場合は、値width：100％; padding-bottom：56.25％;を選択します。 ゴールデンレシオを考慮したアスペクトレシオは、幅：100％、パディングボトム：61.81％、 実現可能。
calcを使用すると、アスペクト比を直接指定できます。たとえば、16：9の場合、padding-bottom：calc（1 /（16/9）* 100％）を使用します。 要素がさらにネストされた要素で構成されている場合、子要素は親要素のパディングを補正するために絶対的に配置されます:
1bc3a80de3db90cdf0535541236d95f2
これは次の結果につながります: