回答編集履歴
1
追記しました
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
メディアクエリの外側に書いてあるCSSは、画面幅が
|
|
1
|
+
メディアクエリの外側に書いてあるCSSは、画面幅が変わっても有効なままなので、`.m_toppic`には`display: none;`がそのまま適用されている状態です。
|
|
2
2
|
|
|
3
3
|
メディアクエリ内の`.m_toppic`に`display: block;`を追加すれば表示されます。
|
|
4
4
|
|
|
@@ -15,4 +15,19 @@
|
|
|
15
15
|
object-fit: cover;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
★追記
|
|
21
|
+
「質問への追記・修正」拝見しました。
|
|
22
|
+
「そのまま画像が小さく引いてくれれば」の認識がこれで合っているかわかりませんが、これで画像の全体が画面内に収まるようになると思います。
|
|
23
|
+
やりたい事が違っていたらすみません！
|
|
24
|
+
```CSS
|
|
25
|
+
@media only screen and (max-width: 560px) {
|
|
26
|
+
.m_toppic {
|
|
27
|
+
display: block;
|
|
28
|
+
width: 100%;
|
|
29
|
+
/*height: 667px;*/ /*これは削除*/
|
|
30
|
+
object-fit: contain; /*coverをcontainに変更*/
|
|
31
|
+
}
|
|
32
|
+
}
|
|
18
33
|
```
|