媒体查询：使用css更改图像src属性

Question

我正在开发适用于Android，iPhone和Windows手机的HTML5应用，并且我使用媒体查询根据屏幕宽度显示不同的图像文件。

如果我使用CSS background-image属性显示图像，我可以根据媒体查询值使用不同的CSS类更改图像文件。但如果使用img标记显示图片，我无法更改图片。

有没有办法使用CSS媒体查询更改与img标记关联的图像源？

Answer 1

使用精灵表并更改background-position或类似的<div>（将替换页面上的<img>）以根据您的媒体对精灵的新部分进行采样查询标准。

示例：

HTML：

<div></div>

CSS：

div
{
    width: 100px;
    height: 100px;
    background: url(http://martywallace.com/view/textures/photo/terraria.jpg) no-repeat;
}

@media all and (max-width: 1000px)
{
    div
    {
        background-position: -20px -50px;
    }
}