image - 如何以响应模式在移动/桌面上交换图像

Question

我在以下文件夹结构中有一个用于桌面和移动设备的图像列表:

img:
    img-1.png
    img-2.png
    img-3.png
    img-4.png
    img-5.png
    img-6.png

img/mobile:
        img-1.png
        img-2.png
        img-3.png
        img-4.png
        img-5.png
        img-6.png

我可以使用下面的代码切换桌面img-1.png:

<span id="switcher">
   <img id="houdini" src="img/img-1.jpg" alt="">
</span> 

<span id="switcher2">
   <img id="houdini2" src="img/img-2.jpg" alt="">
</span>

<span id="switcher3">
   <img id="houdini3" src="img/img-3.jpg" alt="">
</span>

<span id="switcher4">
   <img id="houdini4" src="img/img-4.jpg" alt="">
</span>

<span id="switcher5">
   <img id="houdini5" src="img/img-5.jpg" alt="">
</span>

CSS:

@media only screen and (max-device-width: 489px) {
    span[id=switcher] {
        display:block;
        background-image: url(/mobile/img-1.jpg) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    img[id=houdini] {display: none !important;}
}

如何避免为每个 img-1 到 6 编写上述 CSS...我可以传递/访问 ID 吗？

是否可以删除 !important 的使用？

(必须在 IE8 上工作)

Answer 1

除了在桌面上使用背景图片，您可以将每对桌面/移动图像彼此相邻放置，并通过为它们提供以下类来切换它们的显示类型:

Example Here

<img src="http://placehold.it/200/f30" alt="houdini" class="visible-mobile">
<img src="http://placehold.it/200/3f0" alt="houdini" class="hidden-mobile">

.visible-mobile {
  display: none !important;
}

@media (max-width: 489px) {
  .visible-mobile {
    display: inline !important;
  }

  .hidden-mobile {
    display: none !important;
  }
}