max-width 无效的解决方法
最近在做图片遮罩过程中，发现了一个图片设置了max-width无法充满父元素的问题，具体情况如图所示：
明明设置了图片max-width:100%，但是图片为什么比遮罩窄了一截呢？
经过调试之后我发现，将max-width:100%;修改成width: 100%;下面的图片就可以正常填充了：
于是我查了一下width:100% 和 max-width:100%的区别：width: 100%是将所有指定元素的宽度 拉伸或收缩到和父元素的宽度一致，而max-width: 100%则是如果指定元素的宽度不超过父元素的宽度，则大小不变，如果超过了父元素的宽度，则将宽度收缩为父元素的宽度。
所以，出现上面问题的原因是我将图片设置成max-width:100%，而这个图片宽度未超过父元素的宽度，大小不变，因此这个图片比它上面的遮罩要窄了一截。
总结：掌握width:100% 和 max-width:100%的区别，当max-width:100%未超过父元素宽度而导致无效的时候，把图片设置成width:100%。