回答編集履歴
1
説明追記
test
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
|
-
https://flowr.is/ のサイトでは、メディアクエリで PCとスマホで背景画像を変えてますが、それについては把握してますか。
|
|
1
|
+
[https://flowr.is/](https://flowr.is/) のサイトでは、メディアクエリで PCとスマホで背景画像を変えてますが、それについては把握してますか。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
提示のコードは、スマホ用の縦長の画像(750 X 1334 px)になってます。
|
|
6
6
|
|
|
7
7
|
PCで模写先サイトと同じにならないということなら、PC用のサイズの画像(2880 X 1789 px)に変更してください。
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
模写先と同じようにレイアウトにしたいのなら `background-size: cover;` になります。
|
|
12
|
+
|
|
13
|
+
余白なしに画像を最大限表示するということになります。（一部欠けます。）
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
`background-size: contain;`だと画像はすべて表示されます。そのかわり上下か左右に余白ができます。
|