初心者向け：レスポンシブでの画像の振り分け方

先日、Webデザイナーでおそらく知らない人はいないだろうブログ・Webクリエイターボックスを読んでいてobject-fitプロパティなるものが衝撃だった！

知らないCSSがまだまだ出てくるんだなーと。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

最近追加されていく新しいCSSはどれもレスポンシブを意識したものばかりですね。ですが現場ではまだまだIE11やEdgeを意識して作るので、気が利かないIEをいく日が続きそうです。
４月からWindowsがVistaがサポートを正式にやめるということですが、まだまだIEがプログレッシブエンハンスメントの足を引っ張りそうですね。

古典的で一番わかりやすい　表示非表示

一番古典的で、運用を引き継ぐ時にもわかりやすいかなと思います。いづれの方法も両方のソースコードを読みこむのより一層画像の圧縮などには気を使う必要がありますね。

.is_pc {
  display: block;
}

.is_sp {
  display: none;
}

@media print, screen and (max-width: 768px) {
  .is_pc {
    display: none;
  }

  .is_sp {
    display: block;
  }
}

CSSで背景画像を切り替える時

あまり使う機会はないけどcssでも難なくできる。

.bg {
  width: 1000px;
  height: 600px;
  background: url(/img_pc.jpg) no-repeat center center / cover;
}
 
@media print, screen and (max-width: 768px) {
  .bg {
    background-image: url(/img/img_sp.jpg)
  }
}