CSS 宽度 100% 或最大宽度（以像素为单位）

Posted 2023-03-06

【中文标题】CSS 宽度 100% 或最大宽度（以像素为单位）

【英文标题】：CSS width 100% OR max-width in pixels

【发布时间】：2011-08-06 05:55:57

【问题描述】：

如何为宽度创建 CSS 规则

默认使用 100% 宽度

如果 100% 的宽度超过了某个像素宽度（比如 512 像素），则宽度被限制在这个像素宽度

我不确定宽度和最大宽度的关系，或者 calc() 是如何被支持或表达的。这需要与最新的 WebKit 浏览器和 Firefox 4 一起使用。不需要 IE8 等支持

【参考方案1】：

这实际上是max-width 的预期用途。如果一个元素的计算（实际）width 超过max-width，它将被限制为最大值而不是超出它。百分比与像素无关。

像这样在同一规则中声明两者（不需要calc() 函数）：

#somediv 
    width: 100%;
    max-width: 512px;

【讨论】：

如果您的图片实际上小于 512 像素并且您不想将它们放大到 512 像素，那么这将不起作用。

我能再问一个问题吗，像#somedivwidth:512px; max-width:100%这样设置有什么区别吗？

@hugoderhungrige 512px 只是这个问题中使用的一个示例数字。如果您不希望图像超出其实际尺寸，您只需将 max-width 设置为图像的实际宽度。

就此而言，如果您希望小于 512 像素的图像保持其固有宽度而不是填充其包含块，那么您正在查看错误的问答。本问答的全部要点是图像填充了它们的包含块！

如果你想要相反，比如在大屏幕上限制尺寸，但在小屏幕上占用不超过 100%，你可以说width:500px; max-width:100%;

【参考方案2】：

如果是块级元素，默认应该是 100%，所以不需要声明宽度，那么 max-width: 512px; 会减少它

calc() 根本没有得到很好的支持，但在这种情况下，我认为你不需要它

【参考方案3】：

div max-width: 512px; 

应该够了。

【讨论】：

当 div 小于 512 时，如何解决 100% 的问题？图像不仅会保持 512 并且不会随着 div 的大小而减小吗？