响应头图像的任何其他技术

Question

所有我是新来的，我试图制作响应式标题图像，并且在某种程度上我已经完成了使用这种“dislay none”技术

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