回答編集履歴
5
修正
test
CHANGED
|
@@ -64,6 +64,6 @@
|
|
|
64
64
|
|
|
65
65
|
|
|
66
66
|
|
|
67
|
-
そのため、「**画像のブラウザでの横幅 * (画像の元の高さ / 画像の元の横幅)**」により、そのとき
|
|
67
|
+
そのため、「**画像のブラウザでの横幅 * (画像の元の高さ / 画像の元の横幅)**」により、そのときのブラウザに表示した画像の高さが算出できるのですが、
|
|
68
68
|
|
|
69
69
|
この数字をサイドバーの高さに指定することで画像とサイドバーの高さを揃えることができます。
|
4
修正
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
/* 画像
|
|
29
|
+
/* 画像に対して「min-width: 700px;」が指定されている前提 */
|
|
30
30
|
|
|
31
31
|
min-height: calc(700px * 720 / 1280);
|
|
32
32
|
|
|
@@ -52,6 +52,10 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
+
[CodePenでやってみました。こちらもご参照ください。](https://codepen.io/new1ro/pen/vYNozdJ)
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
55
59
|
---
|
|
56
60
|
|
|
57
61
|
補足:
|
3
修正
test
CHANGED
|
@@ -54,12 +54,12 @@
|
|
|
54
54
|
|
|
55
55
|
---
|
|
56
56
|
|
|
57
|
-
補足:
|
|
57
|
+
補足:
|
|
58
58
|
|
|
59
|
-
「
|
|
59
|
+
「画像の元の高さ / 画像の元の横幅」で、画像の横幅に対する高さの割合が算出できます。
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
そのため、「**画像の横幅 * (
|
|
63
|
+
そのため、「**画像のブラウザでの横幅 * (画像の元の高さ / 画像の元の横幅)**」により、そのときどきの画像の高さが算出できるのですが、
|
|
64
64
|
|
|
65
65
|
この数字をサイドバーの高さに指定することで画像とサイドバーの高さを揃えることができます。
|
2
補足を追加
test
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
画像の横幅が1280px、高さが720pxのとき、以下のようなソースコードで実現できると思います。
|
|
1
|
+
**画像の横幅が1280px、高さが720pxのとき**、以下のようなソースコードで実現できると思います。
|
|
2
2
|
|
|
3
|
-
画
|
|
3
|
+
実際の画像のサイズを調べて、CSSの3箇所を書き換えてください。
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
|
|
7
|
+
画面幅が小さくなったとき、サイドバーの高さがたりなくなるので、`overflow: auto;`でサイドバー内をスクロールするようにしました。
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|
|
@@ -47,3 +49,17 @@
|
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
```
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
補足:
|
|
58
|
+
|
|
59
|
+
「720 / 1200」で、画像の横幅に対する高さの割合が算出できます。
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
そのため、「**画像の横幅 * (720 / 1200)**」により、そのときどきの画像の高さが算出できるのですが
|
|
64
|
+
|
|
65
|
+
この数字をサイドバーの高さに指定することで画像とサイドバーの高さを揃えることができます。
|
1
修正しました。
test
CHANGED
|
@@ -12,32 +12,38 @@
|
|
|
12
12
|
|
|
13
13
|
.g_nav {
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
overflow: auto;
|
|
16
16
|
|
|
17
|
+
flex: 0 0 300px; /* サイドバーの横幅を300pxで固定 */
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
17
|
-
|
|
21
|
+
/* .innerに指定した横幅が1366pxである前提 */
|
|
18
22
|
|
|
19
23
|
height: calc((1366px - 300px) * 720 / 1280);
|
|
20
24
|
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
/* 画像の横幅の最小値が700pxである前提 */
|
|
28
|
+
|
|
21
|
-
|
|
29
|
+
min-height: calc(700px * 720 / 1280);
|
|
22
30
|
|
|
23
31
|
}
|
|
24
32
|
|
|
25
33
|
|
|
26
34
|
|
|
27
|
-
/* 画面サイズが136
|
|
35
|
+
/* 画面サイズが1365px以下のとき */
|
|
28
36
|
|
|
29
|
-
|
|
37
|
+
@media screen and (max-width:1365px) {
|
|
30
38
|
|
|
31
|
-
.g_nav {
|
|
39
|
+
.g_nav {
|
|
32
40
|
|
|
33
|
-
|
|
41
|
+
/* .innerの横幅 = 画面幅 (100vw) のとき */
|
|
34
42
|
|
|
35
|
-
height: calc((100vw - 300px) * 720 / 1280);
|
|
43
|
+
height: calc((100vw - 300px) * 720 / 1280);
|
|
36
44
|
|
|
37
|
-
|
|
45
|
+
}
|
|
38
46
|
|
|
39
47
|
}
|
|
40
48
|
|
|
41
|
-
*/
|
|
42
|
-
|
|
43
49
|
```
|