html - レスポンシブ ヘッダー画像のその他の手法

Question

私はここで初めてで、レスポンシブヘッダー画像を作成しようとしていましたが、この「表示なし」テクニックを使用してある程度完了しました

#img1{
  display:block;
}
#img2{
  display:none;
}

@media screen and (max-width:480px){
  #img1{
    display:none;
  }
  #img2{
    display:block;
  } 
}

これは私が使用している手法ですが、私が考える品質を維持していないので、この方法よりも短いヘッダー画像をレスポンシブにするように教えてください

前もって感謝します

Answer 1

背景画像を使用しないのはなぜですか?

.header {
  background: url(img1.jpg);
  width: 100%;
  height: 200px;
}


@media screen and (min-width: 768px) {
  .header {
    background: url(img2.jpg);
  }
}