回答編集履歴
1
誤字の修正
answer
CHANGED
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
とすることで、windowのサイズがリサイズするたびにjsが実行されて$boxのheightに横幅の1.5倍が入ります。
|
|
22
22
|
|
|
23
23
|
2.cssで無理やり指定する（縦:横 = 1:1.5）（個人的にはこっちが好きです）
|
|
24
|
+
cssで指定するのに何が難しいかというと実装する側としては、
|
|
24
|
-
|
|
25
|
+
「自分の横幅」の1.5倍としたいわけですがcssで「自分の横幅」を基準に指定してくれるプロパティでいいものがないことです。
|
|
25
26
|
ただ、縦横のレスポンシブにする場合はpadding-top（or padding-bottom）を指定することが多いのでこれを使います。
|
|
26
27
|
|
|
27
28
|
つまり1:1.5にしたい場合はwidth:○%;padding-top:150%;を指定すると縦横のレスポンシブになります。
|
|
@@ -37,6 +38,7 @@
|
|
|
37
38
|
|
|
38
39
|
```css
|
|
39
40
|
.box{
|
|
41
|
+
position:relative;
|
|
40
42
|
width:30%;←ここは任意の数
|
|
41
43
|
height:0;
|
|
42
44
|
padding-top:150%;←1:1.5の場合。1:0.5の場合だと50%を指定、1:3の場合だと300%を指定しましょう！
|