鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

CSSの背景画像を枠の中にはまるように一番大きく表示する

背景画像を枠に収まるように一番大きく表示させたいときは、background-sizeプロパティの値は、containにします。

 

これと対照的なのは、(もし背景画像の大きさが、枠より小さくても、枠と同じ縦横比率ではなかったとしても、)枠いっぱいいっぱい背景画像で埋めたい場合に指定する、background-size: coverです。

 

いずれも、実際に記事の一覧などで、サムネイルを表示する場合などによく使われると思います。

 

わかりやすい説明は、W3schoolのサイトです(英語)。

実際にどう見えるか? もデモを掲載してくれています。

CSS3 background-size property

 

 

 

以上。