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

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

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

Can the use of !important be removed?

(Must work on IE8)

回答1:

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

回答2:

<picture>

  <source srcset="https://mockuphone.com/static/images/devices/apple-imac2015retina-front.png" media="(min-width: 1000px)">
  <source srcset="https://mockuphone.com/static/images/devices/apple-macbook-grey-front.png" media="(min-width: 500px)">
  <source srcset="https://mockuphone.com/static/images/devices/apple-iphone6splus-spacegrey-portrait.png" media="(max-width: 500px)"> 

  <img src="https://mockuphone.com/static/images/devices/apple-macbook-grey-front.png" alt="Apple Product" id="my-image-1" class="my_image" style="max-width: 100vw; max-height: 100vh;">

</picture>

Try this. Use min-device-width and/or max-device-width, if you don't want the image to change on browser resize. Hope this helps!

回答3:

You can dynamically control it

$('body').append("<style type='text/css' id="+spanid+">@media screen and (max-device-width: 489px) { span[id="+spanid+"] {/* styles */ } }</style>");

For remove style

$('#spanid').detach();

Or

$('#spanid').remove();

回答4:

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

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

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

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

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

CSS =

  @media only screen and (max-device-width: 489px) {
    span.myswitch {
      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;}
  }

来源：https://stackoverflow.com/questions/25972274/how-to-swap-images-on-mobile-desktop-in-responsive-mode