最大宽度属性如何使图像响应？
提问于 2014-09-07 23:53:18
我有一张像下面这样的图片。
<img src="file.jpg" />下面是css代码
img {
max-width: 100%;
height: auto;
}有谁能解释一下这个css代码是如何使图像响应的，我的意思是完美地缩放它。我想知道这个css代码背后的工作原理。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-08 00:01:16
当父宽度小于图像宽度时，图像宽度将占父宽度的100%。
如果父级宽度大于图像宽度，则图像宽度将保持原始。
max-height也是如此。此外，min-width/min-height将确保宽度/高度不会小于指定的宽度/高度。
height: auto;将保留图像的高宽比。如果您同时设置了max-height和max-width，或者将高度设置为比图像更大的大小，则会拉伸
Stack Overflow用户
发布于 2014-09-08 00:03:58
当您将max-width:100%;应用于任何元素时，该perticular元素的最大宽度可以是其父元素的100%，因此它可以使您知道子元素永远不会超出父元素的范围。
因此，如果父级具有足够的宽度，那么子元素将显示在它的原始大小中，否则它的宽度将与父级匹配。因此，它使我们的布局响应。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25719624
复制相关文章
![使SplitContainer中某个Panel宽度、高度不变[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/6e73ab99357b1b9ab26bcd7e55d9b315.png)
![[译]响应式图像](https://ask.qcloudimg.com/http-save/yehe-1000857/icha8uubnl.jpeg)
腾讯云开发者
