我是响应式web设计的新手，正在寻找答案。
它并没有真正解释太多，但提供了一个解决方案。
如果img被设置为width: 100%，我理解它将占据浏览器窗口或其包含元素的100%。
max-width属性表示它用于设置元素的最大宽度。
如果我将img标记设置为max-width: 100%，则百分比的计算依据是什么元素/上下文？
我所看到的是，当使用max-width时，图像会向下缩放，但不会向上缩放。
最大宽度示例：http://jsfiddle.net/ErNeT/1445/
宽度示例：http://jsfiddle.net/ErNeT/1446/
如果我将img标记设置为max-width:100%，则百分比计算依据？
默认情况下，img标记上没有设置维度。因此，无论发生什么，该图像都不会调整大小。但是，应用最大宽度会使其表现为具有100%的宽度。它将根据父容器调整大小，但将停止在图像的最大宽度。例如：如果图像被切片为宽度为100px，则其大小将调整为宽度高达100px。
另一方面，通过应用宽度(没有最大宽度属性(，它将忽略图像和父容器的所有其他宽度属性。
如果将max-width设置为img，则它将是其父级的max-width。如果您没有为img指定宽度，那么它将不会超过其本机大小。
设置百分比值时，width和max-width都是相对于包含块的。但是，如果包含块的宽度取决于元素的宽度，则生成的布局是未定义的。
从规范来看，
https://www.w3.org/TR/CSS2/visudet.html#the-宽度特性
指定宽度百分比。百分比为根据生成的长方体包含的宽度计算块如果包含块的宽度取决于此元素的宽度，则生成的布局在CSS 2.1中是未定义的。注意：对于绝对定位的元素，其包含块基于块容器元素，百分比是根据该元素的填充框的宽度。这与CSS1，其中宽度百分比总是根据父元素的内容框。
https://www.w3.org/TR/CSS2/visudet.html#min-最大宽度
指定用于确定所用值的百分比。百分比是根据生成的长方体的包含块。如果包含块的宽度为负值，则使用的值为零。如果包含块的宽度取决于此元素的宽度，则生成的布局为CSS 2.1中未定义。
从我的角度来看
if width > max-width use max-width
例如：假设您有一个div框或Image，即您将框的大小设置为宽度>1000px，最大宽度为500px。它仍然遵循最大宽度。
示例2-使用百分比：假设宽度的div设置为500px，最大宽度为100%；你会得到什么结果？boxdiv将变成500px，这是您的起点。试着缩小它。你接下来会得到什么结果？它具有转弯响应能力。
演示
这就是我对宽度和最大宽度之间的区别的理解。
根据你的疑问，我认为这就是你想要的答案
最大宽度示例：DEMO2-当您开始使用最大宽度并设置为100%时。假设你的图片大小是宽度是300px。这意味着你的图像起点是300像素。您不会覆盖原始图像宽度。
宽度示例：DEMO3-当您开始使用宽度并设置为100%时。这意味着您的图像将覆盖原始图像宽度。