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

css3-prograshi(プロぐらし)-kv CSS・SCSS
記事内に広告が含まれていることがあります。

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

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

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

aspect-ratio

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

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

aspect-ratio: 横 / 縦; 


例えば16:9や4:3の場合は次のようになります。

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

注意点

CSSを指定するのはimageタグではなく、その上のimageを囲っているタグです。

タイトルとURLをコピーしました