1

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

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

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

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

这种方法还有其他好处：

  1. 浏览器仅加载相关设备的图像（因此移动设备不会加载桌面图像）
  2. 如果您将图像用作 psudeo 容器的背景，则可以使用属性，例如background-size: cover;允许对图像进行（公认受限）程度的艺术方向。

我能想到一些缺点：

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

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

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

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

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

4

2 回答 2

1

看看这个为响应式图像提供解决方案的网站，它应该提供定位。

于 2012-09-08T23:32:07.803 回答
1

此解决方案只需要加载 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;
}

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

于 2012-09-14T03:25:13.780 回答