Background-size:coverを指定しても画像が元のサイズより拡大表示されてしまう。

Background-size:coverで画面いっぱいに画像を表示させたいのですが
拡大表示されてしまいなんども画面をスライドしないと画像全てが見れないほどになってしまいます。
どういった原因が考えられますか？
元画像のファイルの大きさ自体が大きすぎるのでしょうか。

m.ts10806

2020/05/07 20:52

判断できる情報が何一つありません。自身だけが持っている情報はなるべくなくしてください。調べたこと、コード、元画像のこと全て提示してください。せめて、他者が現象再現できる情報を提示してください。

行動規範の内容に同意します

回答2件

Background-size:coverで画面いっぱいに画像を表示させたいのですが

拡大表示されてしまい

background-size: coverは、要素のサイズいっぱいに背景画像を表示する、という設定です。要素自体が画面をはみ出す大きさとなっていたら、そのサイズに合わせて表示されます。

投稿2020/05/07 22:30

maisumakun

総合スコア145208

ベストアンサー

いくつか考えてみました。

[1]
横長の枠に、縦長の画像を表示しようとすると拡大表示される、と見えることはあると思います。

↓background-size: contain;の場合: 画像は枠のなかに収まる = 適正なサイズに見える

↓background-size: cover;の場合: 画像は枠のなかからはみ出る = 拡大してしまっているように見えるかも

[2]
Chromeで試してみたところ関係なさそうでしたが、
「Background-size:cover」「B」が大文字なので、IEあたりでバグが生じそうな気がします。
私は怖くて「Background-size:cover」とは書けないです。

[3]
background-size: cover;を指定した要素の横幅が4000pxなど何らかの原因で大きくなってしまっている場合、背景画像の横幅は4000pxになるので拡大してしまっている状態になることはあると思います。
background-size: cover;は画面サイズいっぱいに広がる、という意味ではなく指定した要素のサイズいっぱいに広がる、という意味なので。