CSS流体布局和图像

Question

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

使用流体布局，可以使图像完全流畅吗？例如：

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