回答編集履歴
1
日本語修正
test
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
#### 背景画像が表示されない原因
|
|
3
3
|
- `position:absolute`を指定すると、その要素は浮いた状態になります。
|
|
4
4
|
- 親子関係は継続されていますが、位置関係的には質問者様のコードの`.feature`の中にはもう入っていない状態です。
|
|
5
|
-
- つまり`.feature`要素の中に何もない状態となり、
|
|
5
|
+
- つまり`.feature`要素の中に何もない状態となり、高さが0pxとなっているため、背景画像が表示されません。
|
|
6
6
|
|
|
7
7
|
#### ロゴと画像の配置がうまくいかない原因
|
|
8
8
|
- `.feature`の中に直接`<img>`タグを2つ書いているため、配置が難しくなっています。
|
|
9
9
|
|
|
10
10
|
#### 画像が変形してしまう原因
|
|
11
|
-
- 画像の本来の縦横比とは違う比率の`width`と`height`を
|
|
11
|
+
- 画像の本来の縦横比とは違う比率の`width`と`height`を指定しているため、その比率に変形してしまっています。
|
|
12
12
|
|
|
13
13
|
## 対策
|
|
14
14
|
- `.feature`の横幅とサイズを指定する、または、画像のうち最低1つは`absolute`を使用せず中に入っている状態にする。
|
|
@@ -55,13 +55,13 @@
|
|
|
55
55
|
left: -5%;
|
|
56
56
|
z-index: 999;
|
|
57
57
|
|
|
58
|
-
/* ロゴの最大サイズは.img-boxの80% */
|
|
58
|
+
/* ロゴの最大サイズは.img-boxの80%（適当に指定してみました。任意の数値に変更してください） */
|
|
59
59
|
max-width: 80%;
|
|
60
60
|
height: auto;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.feature-image {
|
|
64
|
-
/* 画像の縦
|
|
64
|
+
/* 画像の横縦比を2:1にする（任意の比率を設定してください） */
|
|
65
65
|
width: 100%;
|
|
66
66
|
aspect-ratio: 2 / 1;
|
|
67
67
|
|
|
@@ -71,4 +71,4 @@
|
|
|
71
71
|
box-shadow: 1.5vw 1.875vw #f4d4c3;
|
|
72
72
|
}
|
|
73
73
|
```
|
|
74
|
-
各種数値は適当なので、任意の数値
|
|
74
|
+
各種数値は適当なので、任意の数値を指定してください。
|