如何在移动/桌面上以响应模式交换图片 [英] How to swap images on mobile/desktop in responsive mode

问题描述

我有以下文件夹结构的桌面和手机图片列表：

I have a list of images for desktop and mobiles in the following folder structure:

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 ：

I can use the following code to switch desktop 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

How can I avoid writing the above CSS for every img-1 to 6... Can I pass/access an ID?

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

（必须在IE8上工作）

(Must work on IE8)

推荐答案

您可以将桌面/移动设备的每一对图像放在一起，并通过给予他们以下类别来切换显示类型：

Instead of using background image on desktop, you could place each pair of images for desktop/mobile next to each other and toggle their display type by giving them the following classes:

这里的示例

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

这篇关于如何在移动/桌面上以响应模式交换图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！