Question

我一直在研究响应式图像替换技术，它们都有优点/缺点。但有一点似乎是常见的，它们都使用浏览器嗅探来有选择地设置合适的图像大小。

目前可以创建一个媒体查询语句，可以在页面上定位“已知”给定图像（比如wordpress“特色图像”），以替换每个设备宽度断点处的低分辨率图像。

例如，如果我们为给定页面的特色图像设置了这个标记“

<figure class="figureFeatured">
    <img src="myimage-300x300.jpg" />
</figure>

使用该标记，如果图像名称永远不会更改，则下面的媒体查询将使用纯CSS完成工作，而无需任何其他脚本。

@media only screen and (max-device-width:480px)
{
    figure.figureFeatured img{content:url(myimage-50x50.png)}";
}

问题，以及我希望jQuery可以提供帮助的地方，就是你事先不知道图像名称。您需要使用dom找到它，然后使用正则表达式来指定替换图像。

例如，我的示例中的图像是“myimage-300x300.jpg”，但它可以是带有-WidthxHeight.jpg扩展名的任何文件名。

Answer 1

你能不能做到以下几点？：

<强> HTML

<div class="image"></div>

<强> CSS

.image {
     background: url("image1") no-repeat scroll 1px 1px #FFFFFF;
}

@media only screen and (max-device-width:480px)
{
.image {
     background: url("image2") no-repeat scroll 1px 1px #FFFFFF;
}
}

使用jQuery进行响应式图像替换，无需浏览器嗅探

1 个答案: