「object-fit:cover;」を使って、縦幅を〇pxという風に指定して、
横長や縦長の長方形の画像を全て正方形で表示させようと思ったのですが、
レスポンシブで画面を縮めて、画像の横幅が、指定している縦幅よりも小さくなったとき、正方形ではなく、縦長の画像になってしまって困っていました。
CSSで対応できたので、忘れないようにメモ。
「 aspect-ratio: 横の比率 / 縦の比率 」
を使って、画像のアスペクト比を指定することで解決することができました。
img
{
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 1 / 1;
}