请教一下，img标签设置max-width: 100%和width: 100%的问题。

Question

为img设置“width:100%”

为img设置“max-width:100%”

图中的红色方框是个div。请问为什么用max-width：100%是img自身宽度，而width:100%就是充满父元素的宽度?

Answer 1

width默认是auto啊，你设置max-width相当于没设置width，它按默认值auto自然就是图片宽度咯。max-width很多的场景都是和width配合用的：比如设置一个标签，width是（父元素的）80%但是max-width不能超过1200px，那么这个标签就有了一个最基本的可缩放特性。

Answer 2

你试试外部div小于图片原始宽度、再看看效果 就知道了、

max-width相当于是一个守门员、到了临界值才会去保证最大是这个值

你现在的情况是、图片小于div的宽度、所以图片不会有感觉

如果图片大于div宽度、图片就会是跟div宽度一样的

换句话说、max-width是控制溢出宽度、保证宽度不溢出、如果默认宽度在父容器宽度范围之内、那他就管不着了、
就要用min-width

Answer 3

max-width：100%：如果img宽度大于div宽度，img就显示div100%宽度，否则就显示img的宽度；
width:100%：不管img宽度多少，都显示div宽度