<分区>
有许多技术可以实现响应式图像，但它们都有一些缺点。
对我来说，最大的缺点是没有解决方案可以控制图像的定位。
例如，桌面布局可能使用两列网格，图像在左列，文本在右列。在移动设备上，这作为一个单独的列看起来会更好，图像出现在文本下方。 虽然现有的响应式图像技术允许您缩小移动图像，但它们都没有提供一种无需借助复杂的定位和 float 技术即可更改布局定位的方法。
有了Psuedo元素，这个定位就相对容易了。对于移动样式表，您可以使用 ::after将图像放在文本下方。桌面样式表可以使用 ::before将图像放在文本上方。
这种方法还有其他好处:
- 浏览器只加载相关设备的图像(因此 移动设备不会加载桌面图像)
- 如果您使用您的图片
作为 psudeo 容器的背景，您可以使用属性
例如
background-size: cover;这允许(诚然 限制)图像的艺术指导程度。
我能想到一些缺点:
1) 无法向屏幕阅读器描述图片。然而，网站上的很多图像都是“大气图像”。例如，联系页面有一个电话图像来营造联系某人的“氛围”。向屏幕阅读器描述此类图像可能会增加浏览体验的困惑度。
2) 这种方法混淆了内容和表示之间的界限。然而，话又说回来，如果大多数图像是“大气的”，那么将它们包含在样式表中与使用带纹理的背景没有什么不同。
3) 图片不能在 IE6/IE7 上运行
4) 许多网站不得不使用内联样式来显示图像。但是，这只是替换图像元素 ( <img> ) 的工作，所以它似乎没有问题。
简而言之，这种方法有很多优点，没有真正的缺点。 我注意到似乎没有网站提倡这种方法，所以我想知道我是否遗漏了任何主要缺点。