レスポンシブで長方形画像を正方形のままキープする

2024年1月9日

以前、長方形画像をスタイルシートで正方形表示する方法について記事を書きました。

CSSだけで画像を正方形に調整してみた

スタイルシートの object-fit を使って長方形の画像を正方形に調整した内容ですが、今回少し困ったことが起こりました。

スマホで表示したら、長方形で表示される。

object-fit指定した際に、横幅と縦幅を固定ピクセル指定していましたが、スマホの場合は固定ピクセル指定ができません。

なぜならば、スマホは機種ごとに画面の横幅が異なるためです。
そのため、割合（％指定）になります。

しかし、％指定だと縦と横の実際の長さは一致しません。
例えば横幅２０％、縦幅２０％と指定しても、縦横の長さは同じになりません。
画面サイズの縦の長さ、横の長さが異なるためです。

なんかうまい方法がないかググって調べ、対処できましたので忘備録として記録いたします。

現象はこちら

PCで長方形画像を一覧表示する際に、正方形表示したものが、スマホで表示すると長方形になる。

原因はスマホ時に画像の横幅％指定、縦幅AUTOにしているため

レスポンシブでは、スマホの場合横幅指定を割合（％）で指定します。
なぜならば、機種ごとに横幅が異なるためです。
それに伴い、縦幅はautoにせざるを得なくなります。
縦の％と、横の％は画面に対しての割合になるため、正方形の画面でない限り実際の長さは一致しないことになるためです。

スマホでも正方形を維持するスタイルシート指定

スマホでは、縦幅・横幅をピクセル指定で正方形にすることができません。
ではどうすればよいのでしょうか?

何か解決方法がないか調べてみたところ、うまい方法がありました。
それが、

アスペクト比指定

です。

アスペクト比とは

アスペクト比率とは、縦と横の比率のことを指します。
例えば今のテレビは１６：９で、昔のテレビは４：３です。
この１６：９、４：３というのがアスペクト比になります。

スタイルシートでもアスペクト比を指定できます

スタイルシートでimgタグにアスペクト比をあらかじめ指定しておけば、画像の横幅に対してアスペクト比に応じた長さに自動調整されます。

つまりimgタグにアスペクト比１：１を指定しておけば、縦幅autoでも必ず正方形になります。

具体的な指定方法

（１）ピクセルを指定する方法

（２）アスペクト比で指定する方法

aspect-ratio　の補足

aspect-ratioがアスペクト比の指定になります。
例えば１６：９であれば、aspect-ratio: 16 / 9; と指定します。
aspect-ratio: 横の比率 / 縦の比率　になります。

アスペクト比指定でスマホで確認したころ正方形がキープできました

ちょっとしたことですが、一覧表示は正方形でキープできるほうが見栄えがよくなります。
スマートホンでもうまく表示ができました。

スタイルシートは日々進化しています

１０年前だったらJquery等を駆使して何とかするしかありませんでしたが、今は便利なスタイルシートが増え静的な指定だけでなんとかなることが多いです。

ただ、知らないことも多く少しググってみると無理だと思われたことがあっさりできたりします。