img元素的max-width属性的百分比问题

Question

假如我给img标签写上以下的css代码
img {

display: block;
max-width: 100%;

}
再在img外层加个div随着我设置的外层div宽度变化图片也会自动缩放，但最大只能到图片的原始尺寸，
我的疑问是这个max-width属性的百分比好像是相对于图片来说而并非像width一样是相对于父元素来说。不知道我的理解对不对

Answer 1

max-width是指这个img元素最大的宽是他父级元素的宽，当你没有为这个img指定宽度的时候它会默认以他本身的尺寸进行显示

假如父级div是100x100，而这个图片是72x72，这个时候这个图片的宽度img.width=72 是小于max-width=100的所以他会依然按照72x72进行显示

如果父级div是50x50，这个时候这个图片的宽度img.width=72，而max-width=50,72已经超过了max-width了，因此就会按照width=100%，即50的宽进行显示图片

出现这个情况的原因就是没有给img指定宽度