Chromium、Safari テクノロジー プレビュー、Firefox Nightly で新たにアスペクト比の CSS プロパティをサポート

レスポンシブ レイアウトで間隔の維持に役立つ新しい CSS プロパティ。

アスペクト比

対応ブラウザ

  • Chrome: 88。 <ph type="x-smartling-placeholder">
  • エッジ: 88。 <ph type="x-smartling-placeholder">
  • Firefox: 89。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <ph type="x-smartling-placeholder">

ソース

アスペクト比は、一般的に次のディメンションの 2 つの整数とコロンで表現されます。 または x:y を指定します。写真のアスペクト比は 4:3 と 3:2 が一般的ですが、動画、 最近の消費者向けカメラでは アスペクト比が 16:9 になる傾向があります

<ph type="x-smartling-placeholder">
</ph> アスペクト比が同じ 2 つの画像。1 つは 634 × 951 ピクセル、もう 1 つは 200 × 300 ピクセル。アスペクト比はどちらも 2:3 です。
同じアスペクト比の 2 つの画像。1 つは 634 × 951 ピクセル、もう 1 つは 200 × 300 ピクセル。アスペクト比はどちらも 2:3 です。

レスポンシブ デザインの登場に伴い、アスペクト比を維持することが 特に画像の寸法が異なり、利用可能な要素によって要素のサイズも変わるため、 選択します。

アスペクト比の維持が重要となる例を以下に示します。

  • レスポンシブ iframe を作成する。iframe は親の幅の 100% で、高さは変わらない 特定のビューポート比率
  • 画像、動画、埋め込み用の組み込みプレースホルダ コンテナを作成する アイテムが読み込まれてスペースを占めるときに再レイアウトされないようにします。
  • インタラクティブなデータ可視化や SVG アニメーションのための、均一でレスポンシブなスペースの作成
  • カードやカレンダーの日付などの複数要素のコンポーネント用に、均一でレスポンシブなスペースを作成する
  • サイズが異なる複数の画像に対して均一でレスポンシブなスペースを作成(他の画像と一緒に使用可能) object-fit)

オブジェクトの適合

アスペクト比を定義すると、レスポンシブなコンテキストでのメディアのサイズ設定に役立ちます。このほかに バケットは object-fit プロパティです。これにより、ユーザーはオブジェクト(画像など)がどのように ブロック内に収まるようにする必要があります。

<ph type="x-smartling-placeholder">
</ph> オブジェクトフィット デモの可視化
さまざまな object-fit 値を示します。Codepen のデモをご覧ください。

initialfill の値により、スペースを埋めるように画像が再調整されます。この例では、 ピクセルを再調整します。理想的ではありません。object-fit: cover の用途 スペースを埋める画像の最小サイズ。これに基づいて画像を切り抜く あります。「ズームイン」します。最小の境界で行われます。object-fit: contain を使用すると、画像全体が 常に表示されます。したがって、cover とは逆で、最大境界のサイズを受け取ります。 (上の例では幅)で、アスペクト比を維持しながら画像のサイズを変更します。 スペースに収まりますobject-fit: none ケースでは、画像の中央がトリミングされます。 (デフォルトのオブジェクト位置)を元のサイズのまま維持します。

object-fit: cover は、ほとんどの状況で機能し、 異なるサイズの画像を扱う場合、この方法では情報が失われます(画像のトリミングが 表示されます。

これらの細部が重要な場合(例: フラットな構成の美容商品を扱う場合)は、 重要なコンテンツを切り抜くことは禁止されています。そのため理想的なシナリオでは UI スペースに合わせて各種サイズを柔軟に調整できます。

従来の手法: padding-top でアスペクト比を維持する

<ph type="x-smartling-placeholder">
</ph> padding-top を使用して、カルーセル内のポストプレビュー画像に 1:1 のアスペクト比を設定します。
padding-top を使用して、カルーセル内のポストプレビュー画像のアスペクト比を 1:1 に設定する。

レスポンシブにするには、アスペクト比を使用できます。これにより 特定のアスペクト比サイズを設定し、残りのメディアを個々の軸(高さまたは幅)を基準とします。

画像のアスペクト比に基づいてアスペクト比を維持するための、現在広く受け入れられているクロスブラウザ ソリューション 「パディング トップ ハック」と呼ばれます。このソリューションでは、親コンテナと 子コンテナの絶対位置に配置されます。設定する割合としてアスペクト比を計算し 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">
</ph> アスペクト比を使用して、カルーセル内のポストプレビュー画像のアスペクト比を 1:1 に設定する。
aspect-ratio を使用して、カルーセル内のポストプレビュー画像のアスペクト比を 1:1 に設定する。

残念ながら、これらの padding-top 値の計算はあまり直感的ではなく、ある程度の オーバーヘッドとポジショニングが増加します。新しい固有の aspect-ratio CSS を使用 プロパティは、アスペクトの維持に使用する言語です。 より明確になります。

同じマークアップで、padding-top: 56.25%aspect-ratio: 16 / 9 に置き換え、 aspect-ratio を指定された比率の width / height に変更します。

padding-top の使用
.container {
  width: 100%;
  padding-top: 56.25%;
}
アスペクト比の使用
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top の代わりに aspect-ratio を使用すると、はるかに明確になり、パディングが全面的に見直されません。 プロパティを使用して、通常の範囲外の動作をします。

この新しいプロパティでは アスペクト比を auto に設定(本来のアスペクト比に置き換えられた要素は、そのアスペクト比を使用する) 比率推奨のアスペクト比はありません。」auto<ratio> の両方が widthheight で割った値が推奨アスペクト比です。 次の要素に置き換え 本質的なアスペクト比。その場合は、代わりにアスペクト比が使用されます。

例: グリッド内の一貫性

これは、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;
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
さまざまなアスペクト比の寸法の親要素を持つグリッド内の画像。Codepen のデモをご覧ください。

例: レイアウト シフトを防ぐ

aspect-ratio のもう一つの優れた機能として、プレースホルダ スペースを作成して、 Cumulative Layout Shift を実装し、Web Vitals の改善を支援します。この最初の たとえば、Unsplash などの API からアセットを読み込むと、 メディアの読み込み終了時のレイアウト シフト。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">をご覧ください。 <ph type="x-smartling-placeholder">
</ph> 読み込まれたアセットのアスペクト比が設定されていない場合に発生する、累積的なレイアウト シフトの動画。この動画はエミュレートされた 3G ネットワークで録画されています。

一方、aspect-ratio を使用すると、このレイアウト シフトを防ぐプレースホルダが作成されます。

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
アスペクト比が設定された動画が、読み込まれたアセットで設定されています。この動画はエミュレートされた 3G ネットワークで録画されています。Codepen のデモをご覧ください。

参考: アスペクト比の画像属性

画像のアスペクト比を設定するもう 1 つの方法は、画像属性を使用することです。画像のサイズがあらかじめわかっている場合は、ベスト プラクティスとして ディメンションを widthheight に設定します。

上記の例では、サイズが 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 ShamblenLionel Gustave(Unsplash より)