css - 媒体查询 : Image src property change using css

Question

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

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

有什么方法可以使用 CSS 媒体查询更改与 img 标签关联的图像源吗？

Answer 1

使用 Sprite 表并改变 background-position的 <div>或类似的(它将替换页面上的 <img>)根据您的媒体查询条件对 sprite 的新部分进行采样。

例子:

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;
    }
}