回答編集履歴
2
calcがいらないので、そのように修正
answer
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
ビュー系単位とcalc使うのが一番簡単かと
|
|
1
|
+
ビュー系単位~~とcalc~~使うのが一番簡単かと
|
|
2
2
|
```css
|
|
3
3
|
.map-container {
|
|
4
4
|
position: relative;
|
|
5
|
-
width:
|
|
5
|
+
width: 90vw; /* vwは、ビューの横幅に対して%をとることができる単位 */
|
|
6
|
-
/*
|
|
6
|
+
margin: 50vh auto 0; /* vhはビューの高さに対して%をとることができる単位 */
|
|
7
|
-
margin: 50% 5vw 0;
|
|
8
7
|
}
|
|
9
8
|
.map-container iframe {
|
|
10
9
|
position: absolute;
|
|
11
10
|
top: -45vw; /* 親が、90vwの状態かつiframeが、横幅に対して、半分の高さで、真ん中に寄せたいため */
|
|
12
11
|
left: 0;
|
|
13
12
|
width: 100%;
|
|
14
|
-
height: 45vw; /* 親が、90vwの
|
|
13
|
+
height: 45vw; /* 親が、90vwなので、その半分の45vw */
|
|
15
14
|
}
|
|
16
|
-
```
|
|
15
|
+
```
|
|
16
|
+
calcいらんですね。
|
1
数値が微妙にずれていたので、修正
answer
CHANGED
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
}
|
|
9
9
|
.map-container iframe {
|
|
10
10
|
position: absolute;
|
|
11
|
-
top: -
|
|
11
|
+
top: -45vw; /* 親が、90vwの状態かつiframeが、横幅に対して、半分の高さで、真ん中に寄せたいため */
|
|
12
12
|
left: 0;
|
|
13
13
|
width: 100%;
|
|
14
|
-
height:
|
|
14
|
+
height: 45vw; /* 親が、90vwの横幅の状態のため、その半分の45vw */
|
|
15
15
|
}
|
|
16
16
|
```
|