Question

我看了一个关于响应式网页设计的教程。该教程指定通过将宽度样式设置为100％可以使图像响应，但如果包含元素的宽度足够宽，这将使图像缩放超出其原始分辨率（这对我来说非常有意义。）教程说你可以通过将max-width设置为100％来将图像的大小限制为原始分辨率（这对我来说没有意义。）这里＆＃39; sa 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指定了最大宽度（惊喜！），而不是宽度。

以下算法描述了两个属性如何影响   使用宽度＆＃39;属性：


根据＆＃34;计算宽度和下面的规则计算暂定使用的宽度（没有＆＃39; min-width＆＃39;＆＃39; max-width＆＃39;）   余量＆＃34;上方。

如果暂定使用的宽度大于＆＃39; max-width＆＃39;，则再次应用上述规则，但这次使用的计算值   ＆＃39;最大宽度＆＃39;作为＆＃39; width＆＃39;。
的计算值

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

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

1 个答案: