CSSで画像＋グラデーションを行なった際の画像のサイズについてです。

Question

以下の様に画像とグラデーションを合わせた様なレイアウトを行いました。

  background: linear-gradient(-45deg,rgba(6, 210, 200, 0.9), rgba(0, 72, 150, 0.9)),
  url(../../images/hoge.png);
  background-size: 100vw 100vh;

background-sizeを以上の様にして画面全体にしたのは良いのですが、そん際にその画像がスマホ画面などでは縦に伸びてしまいます。これを改善するにはどうすれば良いでしょうか？

Comments

[spookybird]

"改善"とは具体的にどうなれば正解ですか。PCでも画面幅や高さを少し変えると画像の縦横比が崩れると思いますが、どうしたいんでしょうか。

[Hayato1201]

画像が縦に伸びてしまっているので本来の画像の縦横の比の様にして表示したいです！

[spookybird]

縦横比を維持するということは、縦か横かあるいはその両方を画面いっぱいにすることをあきらめなければなりません。どう諦めて縦横比を維持するんでしょうか。

[Hayato1201]

グラデーション＋画像という様にしていますが、グラデーション部分だけを画面いっぱいにして画像は画面いっぱいにする必要はないので分けて表示することは可能でしょうか？https://www.webcreatorbox.com/tech/css-gradient このサイトを参考にしたのですが。。。

Answer 1

その参考サイトによれば
グラデーションオーバーレイの項目で以下のようにCSSが書かれています。

body {
  background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)),
  url(images/bg-cherrybrossam.jpg);
  background-size: cover;
}

このとおりに書けば良いだけだと思いますよ。
それともこれではなにか問題があるからご自分で書き方を変えたんでしょうか？

Comments

[Hayato1201]

background-size: をcoverにすると画像が画面い収まらないため、100vw 100vh;の様にしました。しかしそれだと縦に伸びてしまうので画面に収まる様に元の比で表示したかったという事です。。。

[spookybird]

あなたが
「グラデーション部分だけを画面いっぱいにして画像は画面いっぱいにする必要はない」
と仰ったので、この回答を提示しました。

[Hayato1201]

言い方が悪かったかもしれませんが画面いっぱいにする必要はないけれども画像が収まる様にもしたいです。

[spookybird]

画像が収まるというのは横ですか。縦ですか。縦も横もですか？

[Hayato1201]

縦も横もです！

Answer 2

アスペクト比（縦と横の比率）が画像には必ずあるので、「横に長い写真」を「スマホの縦画面」で表示させる場合は、隙間は出ます。

それを補うのが一般的には「spookybird」さんの回答にある「background-size:cover;」です。

一般的ではないのが、質問者さんの提示コード「background-size: 100vw 100vh;」です。
これは「アスペクト比を無視して良いですよ」となり、写真が縦に伸びたりします。

-追記-
隙間が出来ても良いので、写真（画像）をカットせず全て表示させたいのであれば「background-size:contain;」を使えば良いと思います。

body {
  background: linear-gradient(-45deg,rgba(6, 210, 200, 0.9), rgba(0, 72, 150, 0.9)),
  url(../../images/hoge.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

Comments

[Hayato1201]

これで思った通りにできました！
ありがとうございました！

[yoshinavi]

解決されて何よりです。
(^^)