web-dev-qa-db-ja.com

背景サイズの違いは何ですか：カバー;および背景サイズ：100％;?

Divの画像のbackground-sizeプロパティをbackground-size: cover;またはbackground-size: 100%;に設定すると、どちらも同じように見えます。

違いはなんですか？いつカバーを使用する必要があり、いつ100％使用する必要がありますか？

cssbackground-size
12
Andreas Furster

cover =背景画像ができるだけ大きくなるように拡大縮小して、背景領域が背景画像で完全に覆われるようにします。背景画像の一部が背景測位エリア内に表示されない場合があります

基本的には、最も内側のエッジが側面に接触するまでズームインします。つまり、すべての画像が表示される100％とは異なり、一部の画像が切り取られる可能性があります。

たとえば、 http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover を参照してください。

17
Michael Durrant

ここにフィドルがあります： http://jsfiddle.net/RS5kX/19/

background-size:100%; = background-size:100% auto; =幅は100％大きく設定され、背景画像の高さは画像のアスペクト比に応じて変化します。

background-size:cover;は、背景画像が常にdiv全体に収まるようにすることを意味し、divに空のスポットが残ることはありません

background-size:100% 100%

空きスペースも残しませんが、もちろんこれは元の画像のアスペクト比を破壊します

10
valerio0999

かなり確かな背景サイズ：カバー;背景サイズ：100％で、画像がアスペクト比を維持しながら要素を塗りつぶすことを意味します。画像を要素の幅の100％に塗りつぶすだけです。

3
Alsh