Question

如何在响应模式下动态更改图像链接。我正在使用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">

Answer 1

尝试向您的css添加媒体查询

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

Answer 2

您有两种选择。

一个。您可以在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。

在响应模式下动态更改图像链接

2 个答案: