tailwindcssで画像のアス比を固定する
Dec 19, 2020 16:54 · 272 words · 1 minute read
object-contain を使えばよい。
<img class="object-contain" src="/image.jpg" />
どうなっているのか
css の object-fit: contain を使っている。
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。
object-fit 知らなかった。昔は画像のアスペクト比を固定するためにiframeを使ったり四苦八苦していたこともあったようだが便利な世の中に生まれてよかった。