回答編集履歴
1
追記
test
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
|
-
`<div class="background-img"></div>`が、レスポンシブ未対応のため、縦横のアスペクト比（画面幅に対する高さ）が変わ
|
|
1
|
+
`<div class="background-img"></div>`が、レスポンシブ未対応のため、縦横のアスペクト比（画面幅に対する高さ）が維持されず、高さが変わりません。
|
|
2
|
+
|
|
3
|
+
そして背景画像が`background-size: cover;`で指定されているため、高さ分の画像を確保したままになるので、縮小したら見切れるように見えてしまいます。
|
|
2
4
|
|
|
3
5
|
|
|
4
6
|
|
|
5
|
-
今の挙動は、背景色と`background-size: contain;`を設定すると、分か
|
|
7
|
+
今の挙動は、背景色と`background-repeat: no-repeat;`、`background-size: contain;`を設定すると、高さが変わっていないのが分かるかと思います。
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|
|
9
|
-
divをレスポンシブ対応させる必要があります。「divブロック要素 可変」等で検索して、試してみてください。
|
|
11
|
+
対策は、divをレスポンシブ対応させる必要があります。いくつか方法があるので、「divブロック要素 可変」等で検索して、理解しやすいサイトを基に試してみてください。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
-追記-
|
|
16
|
+
|
|
17
|
+
一部編集しました。
|