CSS Fluid布局和图像

Question

我正在尝试在CSS中创建一个完全流畅的布局（以％表示的所有内容），该布局将在各种平台（台式机/移动设备/平板电脑，如iPad）上无缝运行。

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

img { max-width:100%; }

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

Answer 1

您提供的代码段显示图像的最大宽度为100% 。 这可能意味着不超过浏览器窗口或设备视口的宽度。 这也可能意味着没有比相对定位的父节点更宽的范围。 但是，如果窗口足够大，则图像将以其原始大小进行渲染。

无法将其应用于背景图片，因为背景图片本身是根据其原始大小进行平铺或定位的。 max-width技巧最适用于内容图像，而不是布局或样式图像。

它的局限性在于IE6完全不支持它。 但是，该市场规模很小且正在萎缩，因此也许您可以忽略该问题。

Answer 2

您的代码表示图片的尺寸相对于其父母的宽度。 因此，可以说图片所在的div宽度为500px，那么图片的最大宽度可能为500px，或更小或更大。 有关最大宽度的更多信息： W3.org最大宽度

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