html - CSS 流体布局和图像

Question

我正在尝试在 CSS 中创建一个完全流畅的布局（一切都以 % 为单位），它可以跨平台无缝工作（桌面/移动/平板电脑，如 iPad）。

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

img { max-width:100%; }

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

Answer 1

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

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

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

Answer 2

您的代码表示图像相对于其父宽度的大小。所以假设图像所在的 div 是 500px 宽，那么图像可能最大为 500px 宽，或者更小，而不是更大。有关最大宽度的更多信息：W3.org max-width

对于背景，这有点不同，您可以使用background-size: x y;它。它是 CSS3，旧版浏览器不支持。有关背景大小的更多信息：W3.org background-size