レスポンシブ レイアウトで間隔の維持に役立つ新しい CSS プロパティ。
アスペクト比
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
アスペクト比は、一般的に次のディメンションの 2 つの整数とコロンで表現されます。 または x:y を指定します。写真のアスペクト比は 4:3 と 3:2 が一般的ですが、動画、 最近の消費者向けカメラでは アスペクト比が 16:9 になる傾向があります
<ph type="x-smartling-placeholder">レスポンシブ デザインの登場に伴い、アスペクト比を維持することが 特に画像の寸法が異なり、利用可能な要素によって要素のサイズも変わるため、 選択します。
アスペクト比の維持が重要となる例を以下に示します。
- レスポンシブ iframe を作成する。iframe は親の幅の 100% で、高さは変わらない 特定のビューポート比率
- 画像、動画、埋め込み用の組み込みプレースホルダ コンテナを作成する アイテムが読み込まれてスペースを占めるときに再レイアウトされないようにします。
- インタラクティブなデータ可視化や SVG アニメーションのための、均一でレスポンシブなスペースの作成
- カードやカレンダーの日付などの複数要素のコンポーネント用に、均一でレスポンシブなスペースを作成する
- サイズが異なる複数の画像に対して均一でレスポンシブなスペースを作成(他の画像と一緒に使用可能)
object-fit
)
オブジェクトの適合
アスペクト比を定義すると、レスポンシブなコンテキストでのメディアのサイズ設定に役立ちます。このほかに
バケットは object-fit
プロパティです。これにより、ユーザーはオブジェクト(画像など)がどのように
ブロック内に収まるようにする必要があります。
initial
と fill
の値により、スペースを埋めるように画像が再調整されます。この例では、
ピクセルを再調整します。理想的ではありません。object-fit: cover
の用途
スペースを埋める画像の最小サイズ。これに基づいて画像を切り抜く
あります。「ズームイン」します。最小の境界で行われます。object-fit: contain
を使用すると、画像全体が
常に表示されます。したがって、cover
とは逆で、最大境界のサイズを受け取ります。
(上の例では幅)で、アスペクト比を維持しながら画像のサイズを変更します。
スペースに収まりますobject-fit: none
ケースでは、画像の中央がトリミングされます。
(デフォルトのオブジェクト位置)を元のサイズのまま維持します。
object-fit: cover
は、ほとんどの状況で機能し、
異なるサイズの画像を扱う場合、この方法では情報が失われます(画像のトリミングが
表示されます。
これらの細部が重要な場合(例: フラットな構成の美容商品を扱う場合)は、 重要なコンテンツを切り抜くことは禁止されています。そのため理想的なシナリオでは UI スペースに合わせて各種サイズを柔軟に調整できます。
従来の手法: padding-top
でアスペクト比を維持する
<ph type="x-smartling-placeholder">
レスポンシブにするには、アスペクト比を使用できます。これにより 特定のアスペクト比サイズを設定し、残りのメディアを個々の軸(高さまたは幅)を基準とします。
画像のアスペクト比に基づいてアスペクト比を維持するための、現在広く受け入れられているクロスブラウザ ソリューション
「パディング トップ ハック」と呼ばれます。このソリューションでは、親コンテナと
子コンテナの絶対位置に配置されます。設定する割合としてアスペクト比を計算し
padding-top
として指定します。例:
- アスペクト比 1:1 = 1 / 1 = 1 =
padding-top: 100%
- アスペクト比 4:3 = 3 / 4 = 0.75 =
padding-top: 75%
- アスペクト比 3:2 = 2 / 3 = 0.66666 =
padding-top: 66.67%
- アスペクト比 16:9 = 9 / 16 = 0.5625 =
padding-top: 56.25%
アスペクト比の値を特定できたので、それを親コンテナに適用します。 たとえば次のようになります。
<div class="container">
<img class="media" src="..." alt="...">
</div>
次に、以下の CSS を作成します。
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.media {
position: absolute;
top: 0;
}
aspect-ratio
でアスペクト比を維持しています
<ph type="x-smartling-placeholder">
残念ながら、これらの padding-top
値の計算はあまり直感的ではなく、ある程度の
オーバーヘッドとポジショニングが増加します。新しい固有の aspect-ratio
CSS を使用
プロパティは、アスペクトの維持に使用する言語です。
より明確になります。
同じマークアップで、padding-top: 56.25%
を aspect-ratio: 16 / 9
に置き換え、
aspect-ratio
を指定された比率の width
/ height
に変更します。
.container { width: 100%; padding-top: 56.25%; }
.container { width: 100%; aspect-ratio: 16 / 9; }
padding-top
の代わりに aspect-ratio
を使用すると、はるかに明確になり、パディングが全面的に見直されません。
プロパティを使用して、通常の範囲外の動作をします。
この新しいプロパティでは
アスペクト比を auto
に設定(本来のアスペクト比に置き換えられた要素は、そのアスペクト比を使用する)
比率推奨のアスペクト比はありません。」auto
と <ratio>
の両方が
width
を height
で割った値が推奨アスペクト比です。
次の要素に置き換え
本質的なアスペクト比。その場合は、代わりにアスペクト比が使用されます。
例: グリッド内の一貫性
これは、CSS グリッドや Flexbox などの CSS レイアウト メカニズムともうまく連携します。リストを検討する 1:1 のアスペクト比を維持したい場合(たとえば、スポンサー アイコンのグリッドなど)に子を追加します。
<ul class="sponsor-grid">
<li class="sponsor">
<img src="..." alt="..."/>
</li>
<li class="sponsor">
<img src="..." alt="..."/>
</li>
</ul>
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.sponsor img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
}
例: レイアウト シフトを防ぐ
aspect-ratio
のもう一つの優れた機能として、プレースホルダ スペースを作成して、
Cumulative Layout Shift を実装し、Web Vitals の改善を支援します。この最初の
たとえば、Unsplash などの API からアセットを読み込むと、
メディアの読み込み終了時のレイアウト シフト。
一方、aspect-ratio
を使用すると、このレイアウト シフトを防ぐプレースホルダが作成されます。
img {
width: 100%;
aspect-ratio: 8 / 6;
}
参考: アスペクト比の画像属性
画像のアスペクト比を設定するもう 1 つの方法は、画像属性を使用することです。画像のサイズがあらかじめわかっている場合は、ベスト プラクティスとして
ディメンションを width
と height
に設定します。
上記の例では、サイズが 800 x 600 ピクセルの場合、画像のマークアップは <img src="image.jpg"
alt="..." width="800" height="600">
のようになります。送信する画像に同じアスペクトが含まれている場合
必ずしも正確なピクセル値でなくてもかまいませんが、
比率を設定する属性値に width: 100%
のスタイルを組み合わせて
画像が適切なスペースを占めるようにしますまとめると、次のようになります。
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
最終的には、aspect-ratio
を
累積的なレイアウト シフトも回避されます(
Codepen)。
まとめ
新しい aspect-ratio
CSS プロパティを使用すると、複数の最新ブラウザでリリースし、適切な状態を維持できます。
メディア コンテナやレイアウト コンテナのアスペクト比の設定が若干シンプルになります。
写真提供: Amy Shamblen、Lionel Gustave(Unsplash より)