Webデザイン

縦横比が異なる画像を全て正方形で表示させ、レスポンシブ対応にする方法

「object-fit:cover;」を使って、縦幅を〇pxという風に指定して、
横長や縦長の長方形の画像を全て正方形で表示させようと思ったのですが、
レスポンシブで画面を縮めて、画像の横幅が、指定している縦幅よりも小さくなったとき、正方形ではなく、縦長の画像になってしまって困っていました。

CSSで対応できたので、忘れないようにメモ。

「 aspect-ratio: 横の比率 / 縦の比率 」
を使って、画像のアスペクト比を指定することで解決することができました。

img
{
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA