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

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

LINEで送る
Pocket

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

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

 

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

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

 

object-fit:coverを指定する

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

 

object-fit:containを指定

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

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

参考

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

LINEで送る
Pocket

フロントエンド開発でお困りのことはありませんか?

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

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

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

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

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

コメントを残す