background-size: coverをimgタグで行うにはCSSのobject-fitを使おう

フロントエンド開発が得意な開発会社

サムネイルの表示などでサイズのバラバラな画像をアスペクト比を崩さずに表示するためにbackground-imageとbackground-sizeをcoverを設定する方法があります。

実はobject-fitを使うとimgタグでも可能なのでそのやり方の紹介。

background-size: coverをimgタグで実現する

1000px×600pxの画像を300px×300pxにすると画像が崩れます。

置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。

アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます

他にもfit, none, scale-downがあり下記リンクから確認できます。

参考

フロントエンドの開発支援を行っています。

・Reactの開発をお願いしたい

・コーディング作業を依頼したい

・javascriptライブラリを作って欲しい。

上記以外にも何かありましたらお気軽にお問い合わせください。

タグ: CSS