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);
  }
}