以下の様に画像とグラデーションを合わせた様なレイアウトを行いました。
CSS
1 background: linear-gradient(-45deg,rgba(6, 210, 200, 0.9), rgba(0, 72, 150, 0.9)), 2 url(../../images/hoge.png); 3 background-size: 100vw 100vh;
background-sizeを以上の様にして画面全体にしたのは良いのですが、そん際にその画像がスマホ画面などでは縦に伸びてしまいます。これを改善するにはどうすれば良いでしょうか?
"改善"とは具体的にどうなれば正解ですか。PCでも画面幅や高さを少し変えると画像の縦横比が崩れると思いますが、どうしたいんでしょうか。
画像が縦に伸びてしまっているので本来の画像の縦横の比の様にして表示したいです!
縦横比を維持するということは、縦か横かあるいはその両方を画面いっぱいにすることをあきらめなければなりません。どう諦めて縦横比を維持するんでしょうか。
グラデーション+画像という様にしていますが、グラデーション部分だけを画面いっぱいにして画像は画面いっぱいにする必要はないので分けて表示することは可能でしょうか?https://www.webcreatorbox.com/tech/css-gradient このサイトを参考にしたのですが。。。
回答2件
あなたの回答
tips
プレビュー