zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

アスペクト比

自動、名前付き、または任意のアスペクト比を設定します。

幅が変わってもメディア枠、サムネイル、埋め込み表示の形を保つには aspect-ratio を使います。一方の寸法が auto の場合、比率からもう一方が決まります。

クラスと CSS の早見表

クラスの例期待される宣言
aspect-videoaspect-ratio: 16 / 9;
aspect-squareaspect-ratio: 1 / 1;
aspect-3/2aspect-ratio: 3 / 2;
aspect-autoaspect-ratio: auto;
aspect-4/3aspect-ratio: 4 / 3;
例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

よく使う比率を比較

横長の枠は16:9、正方形は1:1、aspect-3/2 は横幅が高さより広い長方形です。

よく使う比率を比較
HTML
<div class="wind-demo">
  <p class="wind-demo-note">The ratio determines height from width when height is automatic.</p>
  <div class="wind-demo-frame w-72">
    <div class="wind-demo-art aspect-video w-full">aspect-video 16:9</div>
    <div class="wind-demo-art aspect-square w-24">aspect-square</div>
    <div class="wind-demo-art aspect-3/2 w-48">aspect-3/2</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-art {
  border: 1px solid #849bb3;
  background: linear-gradient(135deg, #dce8f2, #9bb5cc);
  color: #203046;
  text-align: center;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}
.w-24 {
  width: 6rem;
}
.w-48 {
  width: 12rem;
}
.w-72 {
  width: 18rem;
}
.w-full {
  width: 100%;
}
.aspect-3\/2 {
  aspect-ratio: 3 / 2;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-art": true,
      "wind-demo-frame": true,
      "wind-demo-note": true
    },
    "safelist": {
      "docs-preview": [
        "aspect-3/2",
        "aspect-square",
        "aspect-video",
        "w-24",
        "w-48",
        "w-72",
        "w-full"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-art { border: 1px solid #849bb3; background: linear-gradient(135deg, #dce8f2, #9bb5cc); color: #203046; text-align: center; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }

比率を自動にする

aspect-auto は明示した h-16 に高さを任せ、aspect-4/3 は幅から高さを計算します。

比率を自動にする
HTML
<div class="wind-demo">
  <div class="wind-demo-frame flex items-start gap-2">
    <div class="wind-demo-art aspect-auto h-16 w-24">auto: explicit height</div>
    <div class="wind-demo-art aspect-4/3 w-24">custom ratio</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-art {
  border: 1px solid #849bb3;
  background: linear-gradient(135deg, #dce8f2, #9bb5cc);
  color: #203046;
  text-align: center;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}
.flex {
  display: flex;
}
.items-start {
  align-items: flex-start;
}
.h-16 {
  height: 4rem;
}
.w-24 {
  width: 6rem;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
.aspect-4\/3 {
  aspect-ratio: 4 / 3;
}
.aspect-auto {
  aspect-ratio: auto;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-art": true,
      "wind-demo-frame": true
    },
    "safelist": {
      "docs-preview": [
        "aspect-4/3",
        "aspect-auto",
        "flex",
        "gap-2",
        "h-16",
        "items-start",
        "w-24"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-art { border: 1px solid #849bb3; background: linear-gradient(135deg, #dce8f2, #9bb5cc); color: #203046; text-align: center; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }

任意値と名前付きの値

名前付き値は auto、square（1:1）、video（16:9）です。aspect-3/2 のような数値分数と、括弧内の CSS 任意値も使えます。aspect token は継承も必須設定もありません。aspect-auto は比率を自動のままにし、別の寸法指定や内容に形を任せます。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

aspect

フィールド値
カタログ識別子v1.aspect
クラスパターンaspect-<suffix>
文法{"acceptedKinds":["keyword","fraction","arbitrary"],"arbitraryProperty":"aspect-ratio","allowsFractionSlash":true,"allowsColorOpacity":false}
受け入れる値3
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位aspect (42)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティaspect-ratio

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"square""1 / 1"
keyword"video""16 / 9"

宣言テンプレート

プロパティ値の種類固定値
aspect-ratioresolvednull

カタログの例

クラスの例期待される宣言
aspect-16/9aspect-ratio: 16 / 9

Revision History

作成更新