css - max-width 属性如何使图像响应？

Question

我有一张类似下面的图片。

<img src="file.jpg" />

下面是css代码

img {
    max-width: 100%;
    height: auto;
}

任何人都可以解释一下这个 css 代码如何使图像响应，我的意思是完美地缩放它。我想知道这个 css 代码背后的工作原理。

Answer 1

当父级宽度小于图像宽度时，图像宽度将占父级宽度的 100%。
如果父宽度大于图像宽度，图像宽度将保持原始宽度。
与 max-height 相同。此外，min-width/min-height 将确保宽度/高度不会小于指定值。
height: auto; 将保留图像的纵横比。如果同时设置 max-height 和 max-width 或将高度设置为特定大小，则图像将被拉伸(stretch)