我的图像如下。
<img src="file.jpg" />
以下是css代码
img {
max-width: 100%;
height: auto;
}
任何人都可以向我解释这个css代码如何使图像响应，我的意思是完美地扩展它。我想知道这个css代码背后的工作。
答案 0 :(得分：2)
当您的父宽度小于图像宽度时，图像宽度将占父宽度的100％
如果父宽度大于图像宽度，图像宽度将保持原始
与max-height相同。另外min-width / min-height将确保宽度/高度不会小于指定的宽度/高度
height: auto;将保留图像的宽高比。如果同时设置max-height和max-width或将高度设置为特定尺寸，则图像将被拉伸
答案 1 :(得分：2)
当你将max-width:100%;应用于任何元素时，那个特定元素可以拥有其父元素的最大宽度100％，因此它可以让你保证孩子永远不会超出父母的界限。
因此，如果父亲具有足够的宽度，那么孩子将以其原始大小显示，否则其宽度与父母相匹配。因此，它使我们的布局响应。