アスペクト比

hc-aspect は固定の縦横比のボックスを確保し、カラムがリサイズされてもメディア(や埋め込み)が形を保つようにします — 画像の読み込み中にレイアウトシフトが起きません。純 CSS で、ネイティブの aspect-ratio プロパティの上に構築されています。直下のメディア子要素は object-fit: cover でボックスを満たします。

ブラウザのベースライン

aspect-ratio と object-fit は Baseline 2021(現行ブラウザで広く利用可能)なので、@supports のゲートは使っていません。 aspect-ratio のないレガシーエンジンではボックスはコンテンツの高さに潰れます。歴史的なフォールバックは padding-top ハックです:

/* Only needed for engines predating Baseline 2021. */
@supports not (aspect-ratio: 1 / 1) {
  .hc-aspect { position: relative; padding-top: 56.25%; /* 16:9 */ }
  .hc-aspect > * { position: absolute; inset: 0; }
}

基本の HTML

<div class="hc-aspect" data-ratio="16/9">
  <img src="/cover.jpg" alt="…" />
</div>

<div class="hc-aspect" data-ratio="1/1">
  <img src="/avatar.jpg" alt="…" />
</div>

比率

よく使う比率は data-ratio プリセットとして用意されています。属性を省くとデフォルトの 1 / 1 です。

`data-ratio`	比率	典型的な用途
省略	`1 / 1`	アバター、サムネイル。
`16/9`	`16 / 9`	動画、ヒーロー画像。
`4/3`	`4 / 3`	写真、カード。
`3/2`	`3 / 2`	写真撮影。
`2/1`	`2 / 1`	ワイドバナー。
`21/9`	`21 / 9`	シネマ / ウルトラワイド。
`9/16`	`9 / 16`	縦長 / ストーリー。

その他の比率はカスタムプロパティを直接設定します — プリセットは不要です:

<div class="hc-aspect" style="--hc-aspect-ratio: 3 / 4">
  <img src="/poster.jpg" alt="…" />
</div>

埋め込み

<iframe>(動画プレイヤーや地図など)も画像と同じようにボックスを満たすため、レスポンシブな埋め込みにパディングのラッパーは不要です。

<div class="hc-aspect" data-ratio="16/9">
  <iframe src="https://example.com/embed/…" title="Demo video"
          allowfullscreen></iframe>
</div>

フィット

メディア子要素はデフォルトでクロップして満たします (object-fit: cover)。代わりに画像全体をボックス内にレターボックス表示するには data-fit="contain" を使います — 下では同じ横長画像が、左はクロップ、右はレターボックス表示されています:

<!-- default: cropped to fill -->
<div class="hc-aspect" data-ratio="16/9" style="background:var(--hc-color-muted-bg);">
  <img src="/logo.png" alt="…" />
</div>

<!-- letterboxed -->
<div class="hc-aspect" data-ratio="16/9" data-fit="contain" style="background:var(--hc-color-muted-bg);">
  <img src="/logo.png" alt="…" />
</div>

アクセシビリティ

hc-aspect はプレゼンテーション用のラッパーです — role もセマンティクスも追加しません。意味は子要素が運びます: <img> には意味のある alt(純粋な装飾なら alt="")を、<iframe> には title を与えてください。
ボックスが画像の読み込み前にスペースを確保するため、UX と支援技術の読み上げ順の両方を損なうレイアウトシフト(CLS)を防ぎます。

テーマ用トークン

専用トークンはありません — 共有のスペーシング / カラートークンを再利用します。汎用の --hc-* 変数でテーマしてください。

CSS 変数

生成される CSS 変数を表示

--hc-aspect-ratio   (default 1 / 1; set by data-ratio presets or inline)