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

Question

如何在响应模式下动态更改图像链接。我正在wordpress上工作，显示固定大小为280*200的缩略图，但分辨率在480px到600px之间，我想将缩略图大小更改为中等大小（我已设置为480*200），我如何实现这一点？是否有脚本可以检测设备分辨率并自动将img src更改为中等大小的缩略图？？？这样地

（桌面版）

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

（移动版）




Answer 1

你有两个选择。

A.您可以将CSS中的图像设置为空

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

B.您可以使用JavaScript检测屏幕大小，然后在PHP代码中更改图像标签——或者再次使用JavaScript。不过，这是更多的工作。有关详细信息，请参阅PHP-检测显示分辨率。

Answer 2

尝试将媒体查询添加到css中

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