Web 開発者は、img 要素などとは異なり、サイズもアスペクト比も固定されていない HTML 要素を扱う際にジレンマに陥ることがよくあります。多くの場合、これらのオブジェクトが応答的に動作するようにしながら、幅と高さの比率が維持されるようにする必要があります。デフォルトでは、CSS はここで直感的なソリューションを提供しません。ただし、垂直パディング プロパティを利用すると、目的を達成できます。
日常的な例として、正方形の商品画像を考えてみましょう。画像自体は必ずしも正方形ではありませんが、特別な処理や歪みなしに1:1のアスペクト比で表示し、幅（そして高さ）がレスポンシブに変化するようにしたいとします。以下のコードを使えば、追加のマークアップなしでCSSのみを使用して簡単にこれを実現できます。:
1bc3a80de3db90cdf0535541236d95f2
結果で:
しかし、なぜこれが機能するのでしょうか?また、他のアスペクト比はどのように作成できるのでしょうか?これの鍵は、パーセンテージ値で指定されるpaddingプロパティにあります。このプロパティは、常に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
これは次の結果につながります: