我有两个用于@ 1x和@ 2x显示的缩略图版本：
@ 1x：/img/path/to/file.jpg
@ 2x：/img/path/to/file@2x.jpg
通过检查我想要的网站，我复制了HTML：
<div
data-src="/<?php echo preg_replace("/(.+)\.(.+)/","$1@2x.$2",$item["thumb"]); ?>"
data-media="(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx)">
</div>
<img data-toggle="modal" onclick="return false" data-target="#image-modal" class="thumbnail" src="/<?php echo $item['thumb']; ?>">
当用户有HiDPI显示时，我希望他们看到@2x版本。 img存储@ 1x图像，div存储data-src中的@ 2x图像src以及所需的媒体查询。基本上，基于媒体查询，我想用@ 2x版本替换img src（我认为）。
但是，我不知道如何做到这一点，因为我只是检查网站的表面。