回答編集履歴
2
内容の追加
test
CHANGED
|
@@ -40,7 +40,11 @@
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
+
**背景画像の高さ(縦横比)を保ったまま可変にしたい場合は**
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
43
|
-
background-image は要素に高さを与えません。
|
|
47
|
+
background-image(背景画像) は要素に高さを与えません。
|
|
44
48
|
|
|
45
49
|
このような場合は paddingを利用します。
|
|
46
50
|
|
1
内容を追記
test
CHANGED
|
@@ -33,3 +33,37 @@
|
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
これで動くと思います^^
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
### 追記
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
background-image は要素に高さを与えません。
|
|
44
|
+
|
|
45
|
+
このような場合は paddingを利用します。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
```css
|
|
50
|
+
|
|
51
|
+
.background_img{
|
|
52
|
+
|
|
53
|
+
/* 略 */
|
|
54
|
+
|
|
55
|
+
heigth: 0; /* 変更 */
|
|
56
|
+
|
|
57
|
+
padding-bottom: 50%; /* 背景画像の縦横比に合わせて調整して下さい */
|
|
58
|
+
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
先の変更と併せてこのように設定すると
|
|
66
|
+
|
|
67
|
+
縦横比を保ったまま
|
|
68
|
+
|
|
69
|
+
画面サイズに合わせ可変するようになります^^
|