CSS aspect-ratioとobject-fit：焦点ピッカー付き
CSS aspect-ratioとobject-fitガイド
CSS aspect-ratioとobject-fit：ライブデモとTailwind | We.Inc
aspect-ratioでボックスの比率を固定し、object-fitのcover、contain、fill、none、scale-downで写真を収めます。クリックしてobject-positionで焦点を設定できます。
画像サイズの問題のほとんどは、2つのプロパティで解決できます。aspect-ratio: 16 / 9を指定すると、ボックスはどの幅でもその形を保ち、昔のpadding-topハックが不要になります。object-fitは、imgやvideoがそのボックスをどう埋めるかを決めます。coverは切り抜き、containは余白を入れて全体を表示し、fillは引き伸ばします。object-positionは、coverで切り抜くときにどの部分を残すかを指定します。
早見表
- 任意の比率
- aspect-ratio: 4 / 3
- aspect-4/3 or aspect-[4/3]
- 全体を表示する
- object-fit: contain
- 上部を残す
- object-position: top
下には、形を変えられるボックスにテスト画像が1枚入っています。5つのobject-fitの値を切り替え、画像をクリックして焦点を動かし、CSSやTailwindのクラスをコピーしましょう。さらに下では、paddingハックとaspect-ratioの比較、レスポンシブな動画の埋め込み、サムネイルの揃ったカードグリッドを紹介します。
- ボックスの比率とobject-fitの値を選びます。プレビューには、ブラウザーが実際にどう切り抜いたり引き伸ばしたりするかが表示されます。
- coverかnoneを選んだ状態でテスト画像の任意の場所をクリックすると、その位置がobject-positionに設定されます。
- 生成されたCSS、または同じ働きをするTailwindのクラスをコピーします。
- 実際のレイアウトを作るときは、下のカードグリッドと動画のレシピを使いましょう。
- imgタグには必ずwidth属性とheight属性を付けましょう。ブラウザーはファイルの読み込み前にそれをアスペクト比に変換するため、レイアウトがずれません。
- サムネイルやヒーロー写真にはcoverを、何も切れてはいけないロゴや商品写真にはcontainを選びましょう。
- 顔がいつも切れてしまう場合は、画像ファイルを切り直すのではなく、object-positionを顔の方向へ動かしましょう。
- aspect-ratioは推奨される形であって、檻ではありません。ボックス内の長いテキストは、min-height: 0やoverflowを指定しない限りボックスを縦に伸ばします。
よくある質問
aspect-ratioとobject-fitの違いは？
aspect-ratioはボックスそのものの形を決め、どの要素にも使えます。object-fitはimg、video、canvasなどの置換要素にだけ適用され、その内容をボックス内にどう描くかを決めます。通常は両方を使います。画像にaspect-ratioを指定して形を固定し、object-fit: coverで画像をボックスいっぱいに表示します。
object-fitが効かないのはなぜ？
画像のボックスが画像と同じ比率なので、切り抜きや引き伸ばしをする部分がないからです。object-fitの違いが表れるのは、固定の高さとwidth: 100%の組み合わせや、ファイルと異なるaspect-ratioなど、ボックスの形が違う場合だけです。
padding-topハックはまだ必要？
現在のブラウザーでは不要です。aspect-ratioは2021年からChrome、Edge、Firefox、Safariで動作しています。古いブラウザーに対応しなければならない場合だけハックを残し、利用者の環境をcaniuseで確認してください。
object-fitは背景画像にも使えますか？
使えません。CSSの背景では、background-size: coverまたはcontainが同等の機能で、焦点にはbackground-positionを使います。object-fitは実際のimg要素やvideo要素用です。コンテンツ画像にはこちらのほうが適しており、altテキストを持てて、srcsetにも対応しています。
aspect-ratioはdivにも使えますか？
はい、どの要素にも使えます。width: 100%とaspect-ratio: 1を指定したdivは、列の幅に合わせて大きくなる正方形になり、地図のプレースホルダー、アバター、スケルトンローダーに便利です。
ブラウザーがaspect-ratioを解決する仕組み
- 比率が効くのは、片方の寸法が自動のときだけです。widthを指定してheightをautoのままにすると、ブラウザーは比率から高さを計算します。widthとheightの両方を指定すると、計算するものが残らないため比率は無視されます。
- auto 3 / 2という値は、読み込まれた画像のように要素が固有の比率を持つ場合はそれを使い、読み込み前や固有の比率がない場合は3 / 2を使うという意味です。これはまさに、imgのwidth属性とheight属性が裏側で行っている動作です。
焦点の選び方
- object-positionはbackground-positionと同じ値を受け付けます。topやrightなどのキーワード、パーセンテージ、長さです。初期値は50% 50%で、中心を残します。パーセンテージは画像のその位置をボックスの同じ位置に合わせるため、30% 40%なら左から3分の1ほど、中央より少し上の領域が残ります。
- コンテンツ管理システムでは、画像ごとに焦点を2つのパーセンテージとして保存し、インラインスタイルに書き出しましょう。そうすれば、レイアウトがどの比率を使っても、サイト上のすべての切り抜きで被写体がフレーム内に収まります。
aspect-ratioとpaddingハックの比較
aspect-ratioが登場する前は、padding-topをパーセンテージで指定してボックスの形を作っていました。縦方向のpaddingのパーセンテージは幅を基準に計算されるからです。この方法は機能しますが、内容は内側で絶対配置する必要があります。下のボックスはどちらも16:9です。
古い方法と新しい方法、結果は同じ
56.25%は9を16で割った値です。最新の書き方なら1行で済み、内容も通常どおり配置されます。
同じ写真に5つのobject-fitの値を適用
画像は3:2で、ボックスはすべて正方形です。どの値でも比率の違いに対処する必要があるため、差がはっきり分かります。
object-fitの値
- 画像をボックスに合わせて引き伸ばします。imgとvideoの初期値です。比率が違うと画像がゆがみます。
- 画像全体がボックス内に収まるように拡大縮小します。比率が違うと空の帯（レターボックス）ができます。
- 画像がボックスを埋めるように拡大縮小し、はみ出た部分を切り抜きます。ゆがみも帯もありませんが、画像の一部が切れます。
- 画像を本来のサイズのまま保ち、収まらない部分を切り抜きます。細部を1:1で見せるのに適しています。
- noneとcontainのうち、小さくなるほうと同じ動作をします。小さな画像を拡大することはありません。
fill、contain、cover、none、scale-down
300 x 200の同じ画像を、110ピクセルの正方形5つに入れています。赤い点に注目してください。coverで失ってはいけない被写体です。
レスポンシブな動画と埋め込み
16:9を保つYouTube風のiframe
iframeにwidth 100%とaspect-ratioを指定します。ラッパーのdivも絶対配置も必要ありません。
サムネイルの揃ったカードグリッド
すべてのサムネイルを同じ形に
アップロードされる画像の形はさまざまです。aspect-ratioとobject-fit: coverを使えば、ファイルを1つも編集せずにグリッドが整います。
比率とフィットのTailwindクラス
Tailwind v4のユーティリティ（古いバージョンを使っている場合はv3のドキュメントを確認してください）
- aspect-ratio: 3 / 2
- aspect-3/2 (v4) or aspect-[3/2]
- object-fit: cover / contain / fill
- object-cover / object-contain / object-fill
- object-fit: none / scale-down
- object-none / object-scale-down
- object-position: center / top / bottom
- object-center / object-top / object-bottom
- object-position: 30% 40%
- object-[30%_40%]
- 画像をボックスに合わせて引き伸ばします。imgとvideoの初期値です。比率が違うと画像がゆがみます。
- 画像全体がボックス内に収まるように拡大縮小します。比率が違うと空の帯（レターボックス）ができます。
- 画像がボックスを埋めるように拡大縮小し、はみ出た部分を切り抜きます。ゆがみも帯もありませんが、画像の一部が切れます。
- 画像を本来のサイズのまま保ち、収まらない部分を切り抜きます。細部を1:1で見せるのに適しています。
- noneとcontainのうち、小さくなるほうと同じ動作をします。小さな画像を拡大することはありません。
比率、フィット、焦点のプレイグラウンド
元の画像（3:2）。クリックするか、フォーカスして矢印キーを使うと焦点を設定できます。
焦点を設定、現在は{pos}
被写体として赤い点を置いたテスト用の風景画像
中央に戻す
object-fit: {fit}を指定した{ratio}のボックスでの結果
ボックスの比率
焦点が最も重要になるのはcoverとnoneのときです。containやscale-downでは、空の帯がどこにできるかを決めます。
CSSをコピー
クラスをコピー
比率に合う正確なピクセルサイズが必要な場合は、こちらを使いましょう：
アスペクト比計算ツール
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る