在响应模式下动态更改图片链接答案

【问题标题】：Change the image link dynamically in responsive mode在响应模式下动态更改图片链接
【发布时间】：2014-04-10 13:59:30
【问题描述】：

如何在响应模式下动态更改图像链接。我正在使用 wordpress 并显示具有固定大小 280*200 但分辨率在 480px 到 600px 之间的缩略图我想将缩略图大小更改为中等（我已设置为 480*200) 我怎样才能做到这一点？任何脚本来检测设备分辨率并将 img src 自动更改为中等大小的缩略图？？？像这样

（在桌面版本中）

<img class="attachment-thumb-small wp-post-image" src="280x200.jpg">

（在移动版本中）

<img class="attachment-thumb-medium wp-post-image" src="480x200.jpg">

【问题讨论】：

标签： php html css wordpress responsive-design

【解决方案1】：

尝试将媒体查询添加到您的 CSS

@media screen and (min-width: 480px) and (max-width: 600px) {
    .attachment-thumb-medium, .wp-post-image{
width: 480px;
height: 200px;
    }
}

【讨论】：

此解决方案将简单地拉伸图像。有人会长脸。

【解决方案2】：

你有两个选择。

A.您可以将 CSS 中的图像设置为空 <div> 元素的背景。然后，您可以使用 CSS 中的媒体查询来更改图像源。

.thumbnail {background-image:url("280x200.png")};
@media screen and (min-width: 480px) {
    .thumbnail {background-image:url("480x200.png")};
}

B.您可以使用 JavaScript 检测屏幕大小，然后更改 PHP 代码中的图像标签 - 或再次使用 JavaScript。不过，这是更多的工作。详情请见PHP - Detect the display resolution。

【讨论】：

有什么方法可以在img标签中修改src链接？