サイト制作

CSSのaspect-ratioが効かないときは　幅と高さの指定から確認する

慈愛妃きづな

2026-11-07

この記事には広告・アフィリエイトリンクが含まれます。

aspect-ratioは要素の縦横比を指定するCSSプロパティです。両方の寸法を固定した場合や、画像自身の比率を使う場合を分けて確認しましょう。

幅か高さの少なくとも一方を自動にする

aspect-ratioを指定しても形が変わらないときは、まずwidthとheightを確認します。両方に固定した寸法を与えている場合、その寸法を比率の指定で自動的に上書きするものではありません。

例えば、幅を320px、比率を16 / 9、高さをautoとする基本的な枠なら、高さを比率から決められます。CSS Sizingの仕様では、こうした比率はサイズ計算に使う「優先アスペクト比」として扱われています。

MDNによると、aspect-ratio: auto 16 / 9 のようにautoと比率を組み合わせた画像は、画像の読み込み後に固有の比率を使います。常に16対9の枠にしたい場合とは、意図が違います。

記事カードの枠をそろえたいのか、写真全体を元の比率で見せたいのかを先に決めましょう。枠の比率と、その中で写真をどう収めるかは別の問題です。写真の収まり方にはobject-fitなどの設定も関係します。

最小サイズや内容、レイアウトによる制約も確認してください。

比率だけを見て直らないときは、min-widthやmin-height、親要素のレイアウト、はみ出した内容も確認します。aspect-ratioは、どんな内容でも必ずその形に切り取る命令ではありません。

まず文字や子要素を減らした小さな例で、width・height・aspect-ratioだけの動きを確かめ、その後で元のレイアウトへ戻すと原因を絞りやすくなります。開発者ツールで実際に適用されている寸法を見れば、別のCSSによる上書きにも気づけますよ。