如何在响应模式下交换移动/桌面上的图像

Posted 2023-03-06

【中文标题】如何在响应模式下交换移动/桌面上的图像

【英文标题】：How to swap images on mobile/desktop in responsive mode

【发布时间】：2014-11-16 07:30:05

【问题描述】：

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

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" >
</span> 

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

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

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

<span id="switcher5">
   <img id="houdini5" src="img/img-5.jpg" >
</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 上运行）

【问题讨论】：

使用类而不是 ID，类可以应用于任意数量的元素。另外，删除 !importants。这不是必需的，除非你一开始就做错了什么。

@KyleSevenoaks - 感谢 cmets，我会使用它们。保存的问题怎么样，必须为每个图像编写 background-image: url(/mobile/img-1.jpg) .. 我可以访问 img-ID 吗？

这与您之前的问题有何不同？ ***.com/questions/25973118/…

@cimmanon 其实this是第一个问题。

【参考方案1】：

<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"  id="my-image-1" class="my_image" style="max-width: 100vw; max-height: 100vh;">

</picture>

试试这个。 如果您不希望图像在浏览器调整大小时更改，请使用 min-device-width 和/或 max-device-width。 希望这会有所帮助！

【参考方案2】：

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

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

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

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

<span id="switcher5" class="myswitch">
   <img id="houdini5" src="img/img-5.jpg" >
</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;
  

【参考方案3】：

您可以将桌面/移动设备的每对图像并排放置，并通过为它们提供以下类来切换它们的display 类型，而不是在桌面上使用背景图像：

Example Here

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

.visible-mobile 
  display: none !important;


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

  .hidden-mobile 
    display: none !important;
  

【讨论】：

谢谢，很好的解决方案。在初始页面加载时，是否创建了 2 个 HTTP 请求？

@OamPsy 是的。然而，即使使用背景图像，也会创建 2 个 HTTP 请求，首先以 html 格式显示图像元素（之后将隐藏），然后加载背景图像。

我自己正在研究移动优化，正在为图像做一些事情，这篇文章非常简单。但是，您现在不会加载双倍的资源吗？

@StevenSmith 这个答案没有针对移动设备进行优化，也没有针对桌面设备进行优化。正如我之前提到的，它在初始页面加载时创建了 2 个 HTTP 请求。有名为srcset/sizes 的新属性使UA 在媒体条件匹配时忽略src 属性；但截至目前，browser support is very limited。另一种选择是在媒体查询中使用图像作为背景图像；但仍有一些 UA 可能同时创建多个 HTTP 请求。

是的，这就是我一直面临的问题，找到了一个服务器端解决方案，虽然可以，但感谢您澄清这一点

【参考方案4】：

你可以动态控制它

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

用于删除样式

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

或者

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