Question

我是响应式网页设计的新手，正在查看answer。

它并没有真正解释，但提供了解决方案。

如果将img设置为width: 100%，我了解它将占据浏览器窗口的100％或其包含的元素。

max-width属性states，用于设置元素的最大宽度。

如果我将img代码设置为max-width: 100%，哪个元素/上下文是计算出的百分比？

我所看到的只是在使用max-width时图像缩小但从不上升。

Answer 1

如果您将max-width设置为img，那么它将是其父级的max-width。如果您没有指定img的宽度，那么它不会超过它的原始大小。

Answer 2

从我的观点来看

if width > max-width use max-width

示例：假设您有1个div框或图像，您可以设置框宽度的大小＆gt; 1000px和最大宽度500px。它仍然遵循最大宽度。

示例2 - 使用百分比：让我们说宽度的div设置为500px，max-width：100％;你会得到什么结果？ box div将转为500px，这是你的起点。尝试缩小它。你接下来会得到什么结果？它反应灵敏。

这是我对宽度和最大宽度之间差异的理解。

根据您的问题和小提琴，我认为这就是您正在寻找的答案。

最大宽度示例：DEMO2 - 当您开始使用max-width并设置100％时。比方说你的图片大小宽度是300px。意味着您的图像起点是300px。您不能覆盖原始图像宽度。

宽度示例：DEMO3 - 当您开始使用宽度并设置100％时。这意味着您的图像将覆盖原始图像宽度。

Answer 3

设置百分比值时，width和max-width都与包含块相关。但是，如果包含块的宽度取决于元素的宽度，则生成的布局未定义。

根据规范，

指定百分比宽度。百分比是根据生成的包含的框的宽度计算块。如果包含块的宽度取决于此元素宽度，然后在CSS 2.1中未定义结果布局。注意：对于绝对定位的元素，其包含块基于a 块容器元素，百分比是相对于该元素的填充框的宽度。这是一个变化 CSS1，其中百分比宽度始终相对于父元素的内容框。

指定用于确定已使用值的百分比。百分比是根据宽度计算的生成的包含块的块。如果包含块的宽度是否定，使用的值为零。如果包含块的宽度取决于此元素的宽度，然后得到的布局是在CSS 2.1中未定义。

Answer 4

如果我将img标记设置为max-width：100％为什么元素/上下文百分比计算？

默认情况下，img标记没有设置维度。无论发生什么，该图像永远不会调整大小。但是，应用max-width将使其行为类似于100％宽度。它将根据父容器调整大小，但将停止在图像具有的最大宽度。例如：如果图像被切成宽度为100px，则它将调整为最大100px宽度。

另一方面，通过应用width（并且没有max-width属性），它将忽略图像和父容器的所有其他宽度属性。