Question

有许多技术允许响应式图像，但它们都有一些缺点。

对我来说，最大的缺点是没有解决方案可以控制图像的位置。

例如，桌面布局可能会使用两列网格，左侧列中的图像和右侧的文本。在移动设备上，这样看起来会更好，因为单个列的图像出现在文本下方。虽然现有的响应式图像技术允许您缩小移动图像，但它们都没有提供一种方法来进行布局定位更改，而无需采用复杂的定位和浮动技术。

使用Psuedo元素，这种定位相对容易。对于移动样式表，您可以使用::after将图像放在文本下。桌面样式表可以使用::before将图像放在文本上方。

此方法还有其他好处：

我可以想到一些缺点：

1）无法向屏幕阅读器描述图像。然而，网站上的很多图像都是“大气图像”。例如，联系页面具有电话的图像以创建联系某人的“氛围”。将这些图像描述给屏幕阅读器可能会增加浏览体验的混乱。

2）这种方法混淆了内容和表达之间的界限。然而，再次，如果大多数图像都是“大气”，包括它们在样式表中，这种方式与使用例如带纹理的背景没有什么不同。

3）图像无法在IE6 / IE7上运行

4）很多网站都必须使用内联样式来显示图像。但是，这只是替换图像元素（<img>）的工作，所以它似乎没有问题。

简而言之，这种方法提供了许多优点，没有真正的缺点。我注意到没有网站似乎提倡这种方法，所以我想知道我是否有任何重大缺点。

Answer 1

查看this site，它现在可以为响应式图像提供解决方案，并且应该提供定位。

Answer 2

This solution只需要加载1张图片，但图片应该是最高质量的。

如果您将页面的大约2/3下到标题为“灵活图像”的部分，您将找到一个代码块，可以使您的图像动态调整大小，这比加载不同的图像和css-hacking页面更好。

查看文章，这是他们用于图像的代码：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

这是他们用于视频的代码：

.video embed, .video object, .video iframe {
    width: 100%;
    height: auto;
}

我建议您访问the website，因为它解释了为什么这些特定规则是必要的，并且可能会为您提供其他有用的信息。