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

【问题标题】：CSS width 100% OR max-width in pixelsCSS 宽度 100% 或最大宽度（以像素为单位）
【发布时间】：2011-08-06 05:55:57
【问题描述】：

如何为宽度创建 CSS 规则

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

【问题讨论】：

标签： css width

【解决方案1】：

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

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

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

【讨论】：

如果您的图片实际上小于 512 像素并且您不想将它们放大到 512 像素，那么这将不起作用。
我能再问一个问题吗，像#somediv{width: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; }

应该够了。

【讨论】：