Html img最大宽度和百分比它是如何工作的？

我是响应式网页设计的新手，当时正在看一本书

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

如果

img

设置为

width:100%

我知道它将占据浏览器窗口或其包含元素的100%

用于设置元素最大宽度的

max width

属性

如果我将

img

标记设置为

max width:100%

以哪个元素/上下文计算百分比

我所看到的是当使用

max width

时，图像会向下缩放，但不会向上缩放

最大宽度示例：

宽度示例：

在我看来

if width > max-width use max-width

例如：假设您有一个div框或图像，您可以将框的大小设置为>1000px，最大宽度为500px。它仍然遵循最大宽度

示例2-使用百分比：假设宽度的div设置为500px，最大宽度为100%；你会得到什么结果？box div将变成500px，这是您的起点。试着缩小它。下一步你会得到什么结果？轮到你了

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

根据您的问题和建议，我认为这就是您想要的答案。

最大宽度示例： -开始使用“最大宽度”并设置为100%。假设您的图像大小为，宽度为300px。这意味着您的图像起点是300px。您不会覆盖原始图像宽度

宽度示例：

---

-开始使用宽度并设置为100%。这意味着您的图像将覆盖原始图像宽度。

如果将

max width

设置为

img

，则它将是其父图像的

max width

。如果未为

img

指定宽度，则它不会超过其原始大小。

设置百分比值时，

width

和

max width

都与包含的块相关。但是，如果包含块的宽度取决于元素的宽度，则生成的布局是未定义的

从规范来看

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

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

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

默认情况下，img标记上未设置维度。因此，无论发生什么，该图像永远不会调整大小。但是，应用“最大宽度”（max width）将使其表现为100%宽度。它将根据父容器调整大小，但将在图像的最大宽度处停止。例如：如果图像被切成100px的宽度，它将调整到100px的宽度

---

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

这里的上下文使用的是imagesit的相同图像或div，刷新页面并再次尝试单击演示，我已经更新了演示。是的，这就是我要告诉他的哈哈：D