teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記しました

2021/03/26 06:50

投稿

mai1210
mai1210

スコア272

answer CHANGED
@@ -1,4 +1,4 @@
1
- メディアクエリの外側に書いてあるCSSは、画面幅が狭くなっても有効なままなので、`.m_toppic`には`display: none;`がそのまま適用されている状態です。
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
  ```