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

Question

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

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

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

Answer 1

根据您的媒体查询标准，使用精灵表并更改background-positiona<div>或类似（将替换页面上的 a）以对精灵的新部分进行采样。<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;
    }
}