ビューポートでのアスペクト比維持の確保

Web デザインでは、ビューポートの可変寸法に適応しながら要素のアスペクト比を維持することが重要です。これにより、さまざまな画面サイズや方向にわたって一貫性が確保されます。特に正方形の要素を扱う場合にこの保持を実現するには、次の CSS アプローチを実装できます。

アスペクト比プロパティの利用

2022 年現在、アスペクト比は-ratio プロパティは、要素のアスペクト比を制御するための堅牢なソリューションを提供します。希望の幅と高さの比率を指定すると、このプロパティは要素のサイズを調整して指定された比率を維持します。重要なのは、サイズの適応はビューポートの最小寸法によって制限され、横向きと縦向きの両方に動的に調整するという要件を満たします。

実装例

デモンストレーションするにはアスペクト比プロパティの機能を使用するには、次のコードを使用できます:

Aspect ratio 1:1
Aspect ratio 1:19

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

この例では、異なるアスペクト比 (1:1 と 16:9) を持つ 2 つの div が作成されます。アスペクト比プロパティにより、デバイスの向きに関係なく、これらの div がビューポート内で目的の形状とサイズを維持することが保証されます。さらに、それらの寸法はビューポートの最小寸法に適合するように調整され、正方形の形状が確実に保持されます。