html - CSS 流体布局和图像

Question

我正在尝试在 CSS 中创建一个完全流畅的布局(所有内容都以 % 表示)，它可以跨平台(桌面/移动/平板电脑，如 iPad)无缝工作。

使用 Fluid Layouts，可以使图像完全流畅吗？例如:

img { max-width:100%; }

• 这是否意味着它会调整/适应任何范围或窗口大小？
• 这也可以应用于背景图像吗？
• 此属性在浏览器实现方面是否有任何限制？

Answer 1

您提供的代码段表明图像的最大 宽度为100%。这可能意味着不超过浏览器窗口或设备视口(viewport)。它也可能意味着不比相对定位的父节点更宽。但是，如果窗口足够大，图像将以其原始大小呈现。

它不能应用于背景图像，因为背景图像本身是根据其原始大小平铺或定位的。 max-width 技巧主要用于内容图像，而不是布局或样式图像。

它是有限的，因为 IE6 根本不支持它。然而，这个市场相当小而且正在萎缩，所以也许你可以忽略这个问题。