为什么max-width将img限制为原始分辨率而不是包含块的宽度？

Question

我看了一个关于响应式网页设计的教程。本教程指定可以通过将宽度样式设置为100％来使图像响应，但如果包含元素的宽度足够宽（这对我来说非常合适），这会将图像缩放到原始分辨率以外。可以通过将最大宽度设置为100％来将图像的大小限制为原始分辨率（这对我来说没有意义）。以下是JSBin demonstrating the issue（只是调整输出的宽度以查看图像放大，但一旦达到其大小原生大小的红色背景颜色可以看到继续增长，但图像不会）

为什么它将宽度限制为图像的原始分辨率而不是包含块的宽度？

对于答案我想从CSS规范或HTML规范中取得一小段文字，并提取摘录来自相关链接。如果我的假设必须有一个标准定义，说明为什么图像上的最大宽度以这种方式起作用是不正确的，请向我解释哪些CSS规则正在应用，以便发生此行为。

下面是链接JSBin例如HTML片段：

<style> 
    .column { 
     width: 70%; 
     margin: auto; 
     background-color: red; 
    } 

    .img-responsive { 
     max-width: 100%; /* image stops at native size */ 
     /* width: 100%; */ /* image enlarges greater than native size */ 
    } 
</style> 

<div class="column"> 
    <img src="myimage.jpg" class="img-responsive"> 
</div> 

Answer 1

嗯，那是因为max-width指定最大宽度（惊喜！），没有宽度。

下面的算法描述了两个属性如何影响“width”属性的 使用值：

1. 暂定使用宽度被计算（没有“最小宽度”和“最大宽度'）遵循上述“计算宽度和 边距”下的规则。
2. 如果临时使用的宽度大于'最大宽度'，则再次应用上述规则，但是这次使用 'max-width'的计算值作为'宽度'的计算值。

如果暂定使用宽度不大于max-width更大，max-width不会使图像增长。