レスポンシブ対応について

Question

５６０px以下になった場合、画像を切り替えるようにしたいのですが
画面を小さくしていくとモバイル版の画像が切り替わらず消えてしまいます。
pc版の時にはモバイル画像が消えて欲しいのでnoneにしていますが
@mediaの中に指定しても出てこないのでしょうか？
初心者な質問で申し訳ないですがお分かりになる方いらっしゃいましたらよろしくお願いします。

<div class="top inview fadeIn">
      <img src="images/toppic600.jpg" class="toppic" alt="top">
      <img src="images/m_toppic.jpg" class="m_toppic" alt="top"> 
    </div>

.top{
  height: 680px;
}
.toppic {
  width: 100%;
  height: 680px;
  object-fit: cover;
}
.m_toppic{
  display: none;
}

@media only screen and (max-width: 560px) {
.top{
  height: 667px;
}
.m_toppic {
  width: 100%;
  height: 667px;
  object-fit: cover;
}
.toppic {
  display: none;
}

Comments

[K_3578]

要件の確認ですが、PCとスマートフォン等で画像を切り替えたいという事だけでしょうか？

[mikan23]

そうですね。
本当はそのまま画像が小さく引いてくれればいいのですがうまくいかなそうなので
縮小した画像に切り替えたいと思っています。

[K_3578]

色々違ってたので削除.

Answer 1

以下の2点を修正すれば画像の切替を行うことができると思います。

• 1. @mediaの部分の最後に } がない

@media only screen and (max-width: 560px) {
.top{
  height: 667px;
}
.m_toppic {
  width: 100%;
  height: 667px;
  object-fit: cover;
}
.toppic {
  display: none;
}
} /*ここを追記*/

• 1. @mediaの中に.m_toppicの部分にdisplay: blockの表記がない

.m_toppicの値がdispaly: noneから変更がないため、サイズが小さくなってもsp画像がdispaly: noneのままになってしまっています。

@media only screen and (max-width: 560px) {
.top{
  height: 667px;
}
.m_toppic {
  display: block; /*ここを追記*/
  width: 100%;
  height: 667px;
  object-fit: cover;
}
.toppic {
  display: none;
}
}

Comments

[mikan23]

>1. @mediaの部分の最後に } がない
失礼しました。こちらのコピペミスです、こちらに貼り損ねていました。
display:blockで画像表示が維持されました。
ありがとうございました。

Answer 2

メディアクエリの外側に書いてあるCSSは、画面幅が変わっても有効なままなので、.m_toppicにはdisplay: none;がそのまま適用されている状態です。

メディアクエリ内の.m_toppicにdisplay: block;を追加すれば表示されます。

.m_toppic{
  display: none; /*画面幅が狭くなってもこれが適用されているので*/
}

@media only screen and (max-width: 560px) {
  .m_toppic {
    display: block; /*これを追加してdisplayプロパティを上書き*/
    width: 100%;
    height: 667px;
    object-fit: cover;
  }
}

★追記
「質問への追記・修正」拝見しました。
「そのまま画像が小さく引いてくれれば」の認識がこれで合っているかわかりませんが、これで画像の全体が画面内に収まるようになると思います。
やりたい事が違っていたらすみません！

@media only screen and (max-width: 560px) {
  .m_toppic {
    display: block;
    width: 100%;
    /*height: 667px;*/ /*これは削除*/
    object-fit: contain; /*coverをcontainに変更*/
  }
}

Comments

[mikan23]

ありがとうございます。
display: block;で画像の維持ができました。
ご丁寧にありがとうございました。