带有伪元素的响应式图像 - 这是个好主意吗？ [关闭]答案

【问题标题】：Responsive Images with Psudo Elements - Is this a good idea? [closed]带有伪元素的响应式图像 - 这是个好主意吗？ [关闭]
【发布时间】：2012-09-02 04:23:26
【问题描述】：

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

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

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

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

这种方法还有其他好处：

浏览器仅加载相关设备的图像（因此移动设备不会加载桌面图像）
如果您使用图像作为 psudeo 容器的背景，您可以使用属性例如background-size: cover;，它允许（诚然限制）图像上的艺术方向程度。

我能想到一些缺点：

1) 无法向屏幕阅读器描述图片。但是，网站上的很多图像都是“大气图像”。例如，联系页面有一个电话图像，以创建联系某人的“气氛”。向屏幕阅读器描述此类图像可能会增加浏览体验的混乱度。

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

3) 图片无法在 IE6/IE7 上运行

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

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

【问题讨论】：

阅读：little link，"avoid asking subjective questions"。
“大气图像”的技术术语是装饰图像。与带来/传达信息的图像相反（并且将具有非空alt 属性）。由于您的问题可能已经结束，我不会回答，但仍然是评论：假设您在段落中有一个 img 和 text 。将您的文本放在span 中，将其显示为内联或块，您的 HTML 图像将很容易在同一行上或不在同一行上。对于 CSS 图像，使用填充和边距（左侧或顶部）为该图像留出空间。
我知道我的问题有点长。但是，我个人并不认为这是主观的，因为我只是想问是否将伪元素用于响应式图像是一种公认的良好做法（因为似乎没有网站提倡它）。这有点像使用表格进行布局被认为是公认的坏习惯。虽然我可以看到我的问题如何被认为是主观的，但我会在以后提出问题时考虑到这一点。
CSS generated content is not reliably available to them 肯定对屏幕阅读器用户有害。

标签： image css responsive-design

【解决方案1】：

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

【讨论】：

谢谢！尽管该解决方案会产生带宽问题，但它避免了屏幕阅读器的问题。
如果您认为我的问题有用，请给它一个积极的投票。
@big_smile 你也可以看看我下面的另一个答案，在避免带宽问题方面可能更好。

【解决方案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，因为它解释了为什么这些特定规则是必要的，并且可能会为您提供其他有用的信息。

【讨论】：