img max-width with percent 它是如何工作的？答案

【问题标题】：img max-width with percentage how does it work?img max-width with percent 它是如何工作的？
【发布时间】：2016-12-13 17:27:09
【问题描述】：

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

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

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

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

如果我将img 标记设置为max-width: 100%，则计算百分比的依据是什么元素/上下文？

我所看到的只是当使用max-width 时，图像会缩小但从不放大。

【问题讨论】：

标签： html css

【解决方案1】：

从我的角度来看

if width > max-width use max-width

示例：假设您有 1 个 div 框或图像，您将框的宽度设置为 > 1000 像素，最大宽度为 500 像素。它仍然遵循最大宽度。

示例 2 - 使用百分比：假设 div 的宽度设置为 500px，max-width 设置为 :100%；你会得到什么结果？ box div 将变成 500px，这是您的起点。试着缩小它。你接下来会得到什么结果？它是响应式的。

这就是我对宽度和最大宽度之间的区别的理解。

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

最大宽度示例：DEMO2 - 当你开始使用最大宽度并设置为 100%。假设您的图像尺寸为宽度为 300 像素。这意味着您的图像起点是 300 像素。您不会覆盖原始图像宽度。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

从规范来看，

指定百分比宽度。百分比是根据生成的盒子的宽度计算堵塞。如果包含块的宽度取决于该元素的宽度，那么最终的布局在 CSS 2.1 中是未定义的。注：对于绝对定位元素，其包含块基于块容器元素，百分比计算相对于该元素的填充框的宽度。这是从 CSS1，百分比宽度总是相对于计算父元素的内容框。

指定用于确定使用值的百分比。百分比是相对于宽度计算的生成框的包含块。如果包含块的宽度是负，使用的值为零。如果包含块的宽度取决于此元素的宽度，则生成的布局为在 CSS 2.1 中未定义。

【讨论】：

【解决方案4】：

如果我将 img 标签设置为 max-width: 100% 到什么元素/上下文是百分比计算？

默认情况下，img 标签上没有设置维度。所以无论发生什么，该图像永远不会调整大小。但是，应用 max-width 会使其表现得像具有 100% 宽度一样。它将根据父容器调整大小，但会在图像的最大宽度处停止。例如：如果图像被切片为 100px 宽度，它将调整为 100px 宽度。

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

【讨论】：