Image 具有Psudo元素的响应性图像-这是一个好主意吗？

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

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

例如，桌面布局可能使用两列网格，图像在左列，文本在右列。在手机上，如果是一列，图像出现在文本下方，效果会更好。 虽然现有的响应图像技术允许您缩小移动设备的图像，但没有一种技术能够在不使用复杂定位和浮动技术的情况下改变布局定位

使用Psuedo元素，这种定位相对容易。对于移动样式表，可以使用

：：after

将图像放置在文本下方。桌面样式表可以使用

：：before

将图像放置在文本上方

这种方法还有其他好处：

浏览器仅加载相关设备的图像（因此 移动设备无法加载桌面映像）

如果你使用你的图像 作为psudeo容器的背景，您可以使用属性 如

背景尺寸：封面允许一个
限制）图像的艺术方向

我可以想到一些缺点：

1） 无法向屏幕阅读器描述图像。然而，网站上的很多图像都是“大气图像”。例如，联系人页面上有一个手机图像，用来营造与某人联系的“氛围”。向屏幕阅读器描述这样的图像无疑会给浏览体验带来更多混乱

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

3） 这些图像在IE6/IE7上不起作用

4） 许多网站将不得不使用内联样式来显示图像。然而，这将只是替换图像元素的作业（

），因此它似乎没有问题

简而言之，这种方法有很多优点，但没有真正的缺点。 我注意到似乎没有任何网站提倡这种方法，所以我想知道我是否遗漏了一些主要的缺点

看看现在为响应图像提供解决方案并应提供定位的解决方案。

只需加载一张图像，但图像质量应最高

如果你把页面的2/3转到标题为“灵活图像”的部分，你会发现一个代码块，它可以使你的图像动态调整大小，这比加载不同的图像和css攻击页面要好

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

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

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

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

---

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

请阅读以下内容：，

“避免提出主观问题”

。技术术语“大气图像”是装饰图像。与带来/传达信息的图像相反（并且将具有no-empty

alt

属性）。由于你的问题可能已经结束了，我不会回答，但还是要发表评论：假设你有一个img和一个parapaph中的文本。将文本放入

span

，将其显示为内联或块，您的HTML图像将很容易位于同一行或不在同一行。对于CSS图像，使用填充和边距（左或上）来为该图像保留空间。我知道我的问题有点长。然而，我个人并不认为这是主观的，因为我只是想问，在响应图像中使用伪元素是否是一种公认的良好做法（因为似乎没有任何网站提倡这种做法）。这有点像在布局中使用表被认为是公认的坏习惯。虽然我可以看到我的问题是如何被认为是主观的，所以我会在以后提问时牢记这一点。当然对屏幕阅读器用户有害。谢谢！虽然该解决方案会产生带宽问题，但它避免了屏幕阅读器的问题。如果您认为我的问题有用，请投赞成票。@big_smile您也可以看看我下面的另一个答案，从避免带宽问题的角度来看，该答案可能更好。