在各种设备上显示不同的图像

问题描述：

我在首页上有一张图片（http://www.ckdev.info/cdp），这是一个行动呼吁以完成免费估算的表单。桌面或平板电脑（横向）非常棒，因为窗体显示在右侧。

但是，在其他设备或方向上查看时，视口太小，无法将侧边栏显示在右侧，并且会下降到底部。所以“右箭头”图像没有逻辑意义。

我想要做的是一个“if-else”解决方案。如果屏幕宽度为xx px或更大，则显示“right-arrow.jpg”，否则显示“down-arrow.jpg”。我将附加一个锚到表单，以便在显示时点击/触摸down-arrow.jpg将向下滚动到表单。

恐怕我没有编码器，所以我毫不怀疑这可以做到，我不知道该怎么做！谢谢。

答

你想要的是一个CSS媒体查询来改变显示的图像。

对于像波泰特iPhone的智能手机将是类似的东西：

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)

{/ * STYLES GO HERE * /}

详情看一看：

w3schools

cssmediaqueries

当心IE浏览器中的这些媒体查询，它并不总是和他们一起玩。 – 2014-09-24 19:08:30

答

你可以用CSS媒体查询来做到这一点。

试试这个：（变化900px和899px到你想要的值）

@media(min-width: 900px) { 
    #img { 
     width: 100%; 
     height: 150px; 
     background: url('http://www.ckdev.info/cdp/images/estimate.png'); 
     background-size: contain; 
     background-repeat: no-repeat; 
     background-position: center; 
    } 
} 

@media(max-width: 899px) { 
    #img { 
     width: 100%; 
     height: 100px; 
     background: url('http://www.ckdev.info/cdp/images/estimate.png');/*change image url*/ 
     background-size: contain; 
     background-repeat: no-repeat; 
     background-position: center;   
    } 
}

看看这里：jsFiddle（调整结果窗口宽度超过900px）

我只是做你的在不同的媒体查询上显示不同大小的图片，而是将您的背景网址更改为您需要的图片。

这看起来很简单 - 谢谢。感谢所有那些快速回复 - 太棒了！所以这将在我的CSS文件中？那么，如果我的图像是

...

我使用

？或者它是一种风格？ – 2014-09-24 18:42:47

是的，把它放在你的CSS中。你可以像使用

（无分号），然后使用.img {}插入#img {} – 2014-09-24 18:47:27

这绝对是单一图像交换的方式。我提到了js版本，因为我使用自定义数据源属性为媒体交换了我网站上的大多数图像。如果您不必担心动态数据源或客户端添加的内容，那么要比使用CSS的方式更容易。 – 2014-09-24 19:06:45

答

只要您不介意来自滚动条的窗口宽度中的某些差异，就可以使用jQuery无需额外任何额外的工作就可以实现此目的。我会在一秒内回到滚动条。要测试宽度，您可以使用jQuery(window).width()。这将以像素为单位返回窗口的宽度。正是你在找什么。一个示例代码片段：

jQuery(document).ready(function(){ 
    if (jQuery(window).width() > 1000){ 
    jQuery(<select img here>).attr('src', '/path/to/new/image.jpg'); 
    } 
});

我注意到你没有在你提到的图像上有类或id。我会建议添加一个ID，以便于选择。例如，<img src="/cdp/images/estimate.png" alt="Get a free interior or exterior painting estimate" id="estimate-with-arrow">。如果您进行这项更改，您可以换出<select img here>代替'img#estimate-with-arrow'（这将选择带箭头的id估算图像）。瞧，图像交换。

我会注意三件事情。首先，这只会在初始页面加载时起作用。如果用户以完整桌面宽度加载页面然后缩小页面，则图像在通过中断点时不会更改。您需要绑定到调整大小得到这个工作：

jQuery(window).resize(function() { 
    <code here> 
});

其次，我成立了这个特殊的代码在 1000像素换出图像的任何屏幕。这意味着您只会为较小的设备加载一个图像，从而节省带宽。这是首选，广告移动计划更挑剔。

第三，滚动条。使用jQuery测试窗口宽度将不会匹配与CSS相同的中断点。我使用modernizr来解决这个问题。虽然这有点高级。

在各种设备上显示不同的图像

相关推荐