【CSS】画像のアスペクト比を保つ簡単な方法｜aspect-ratioの使い方

画面の幅を変化させた時に画像のアスペクト比が崩れてしまうことがあります。

そんな時は、widthやheightで調整すると説明しているところもありますが、16:9や4:3などの具体的な比をを決めることは難しいことがあります。

そんな時にとても簡単な設定方法があります。

aspect-ratio

画像のアスペクト比を指定するにはaspect-ratioというプロパティが使えます。

値は横 / 縦;で指定します。

aspect-ratio: 横 / 縦;　

例えば16：９や４：３の場合は次のようになります。

aspect-ratio: 16 / 9;
aspect-ratio: 4 / 3;