aspect-ratio: 1/1;
アスペクトってつまり縦横比のことだけど、これで正方形になる。でも、長方形の画像は歪んでしまうのでは…?
aspect-ratio: 1/1;
width: 100%;
height: auto;
object-fit: cover;
こうすると箱一杯に広げて埋めてくれてかつ、長いほうのはみだしはカットされる。
箱(画像を収める要素)に対して画像が小さすぎるとなんか変な感じになるので、箱が200pxなら画像は長辺300くらいかな?
<aside> 💡
もちろん正方形に自分でトリミングしたほうが狙い通りのものが正確にできるのでおすすめ! (ワシも昔はやっとった)
</aside>
object-fit: cover; は上記の通り、長いほうのはみだしはカットされる。
object-fit: fill だと箱に縦横比崩れてもみっちり収める。
object-fit: contain だと箱に縦横比を保ったまま収まる。短い辺は余白ができる。
object-fit: none は拡縮なしではみ出したらカットする。小さい画像は全体余白ができる。
object-fit: scale-down 大きい画像はcontain、小さいのはnone 。