読者です 読者をやめる 読者になる 読者になる

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

スポンサーリンク
広告

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

 

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

 

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

 

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

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

CSS3 background-size property

 

 

 

以上。