回答編集履歴
4
説明追記
answer
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
画像の右のdiv要素(topContent)の内容が多いとそれによって画像が縮小されます。内容が少なければ670pxで表示されます。
|
|
2
2
|
|
|
3
3
|
ご希望のことが画面幅が1200px以上の場合は元サイズ（670px）、それ以下の場合は縮小してほしいということなら、~~メディアクエリで1200px以上は縮小しない設定にすることになると思います~~画像とコンテンツの幅を適切に設定すればいいですね。
|
|
4
|
-
670/1200=0.55833
|
|
5
4
|
|
|
5
|
+
flexコンテナの最大幅が1200pxで画像が670pxなので、670/1200=0.55833 から画像の幅を55.8%に設定すると
|
|
6
|
+
画面幅1200px以上だと 670px固定、それ以下だと画面幅に応じて縮小していきます。
|
|
7
|
+
|
|
6
8
|
```css
|
|
7
9
|
img {
|
|
8
10
|
width: 100%;
|
3
コード修正
answer
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
```css
|
|
7
7
|
img {
|
|
8
|
-
|
|
8
|
+
width: 100%;
|
|
9
9
|
height: auto;
|
|
10
10
|
vertical-align: bottom;
|
|
11
11
|
}
|
2
説明、コード修正
answer
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
画像の右のdiv要素(topContent)の内容が多いとそれによって画像が縮小されます。内容が少なければ670pxで表示されます。
|
|
2
2
|
|
|
3
|
-
ご希望のことが画面幅が1200px以上の場合は元サイズ（670px）、それ以下の場合は縮小してほしいということなら、メディアクエリで1200px以上は縮小しない設定にすることになると思います。
|
|
3
|
+
ご希望のことが画面幅が1200px以上の場合は元サイズ（670px）、それ以下の場合は縮小してほしいということなら、~~メディアクエリで1200px以上は縮小しない設定にすることになると思います~~画像とコンテンツの幅を適切に設定すればいいですね。
|
|
4
|
+
670/1200=0.55833
|
|
4
5
|
|
|
5
6
|
```css
|
|
6
7
|
img {
|
|
@@ -20,18 +21,12 @@
|
|
|
20
21
|
|
|
21
22
|
figure {
|
|
22
23
|
/* width: 100%; */
|
|
24
|
+
width: 55.8%;
|
|
23
25
|
height: auto;
|
|
24
|
-
width: 55.8%;
|
|
25
26
|
}
|
|
26
27
|
.topContent {
|
|
27
28
|
width: 44.2%;
|
|
28
29
|
}
|
|
29
|
-
|
|
30
|
-
@media screen and (min-width:1200px) {
|
|
31
|
-
figure {
|
|
32
|
-
flex-shrink: 0;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
30
|
```
|
|
36
31
|
|
|
37
32
|
[動作確認用サンプル](https://codepen.io/hatena19/pen/eYmRMrY)
|
1
コード修正
answer
CHANGED
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
figure {
|
|
22
22
|
/* width: 100%; */
|
|
23
23
|
height: auto;
|
|
24
|
-
width:
|
|
24
|
+
width: 55.8%;
|
|
25
25
|
}
|
|
26
26
|
.topContent {
|
|
27
|
-
width:
|
|
27
|
+
width: 44.2%;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
@media screen and (min-width:1200px) {
|