1

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

目前可以创建一个媒体查询语句，该语句可以针对页面上的“已知”给定图像（比如说 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 扩展名的文件名。

4

1 回答 1

0

你不能只做以下事情吗？：

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;
}
}
于 2013-05-01T14:45:58.683 回答