使用max-width设置图片宽度的好处

使用max-width设置图片宽度可以使我们的图片“自适应能力更强”，同时也可以提高我们网站的用户体验度。比如，在网页中设置图片的宽度的时候您是否遇到过以下情况：

• 手机端为了做图片适配设置了width值为100%，对于大尺寸的图片还好，但是小尺寸的图片就会出现自动放大产生模糊现象，但是如果不设置，图片太大又会溢出手机屏幕。
• 电脑端为了显示图片真实尺寸，没有设置width属性值(默认为auto)，于是就出现有的图片太大撑破了图片正文部分。但是如果设置了width属性值为100%，那么对于宽度较小的图片，又会自动放大，使图片变的模糊。

当然有人说可以把width设置为固定值，但是一个网站中的图片多种多样，其尺寸比例大小各方面可能是多种多样的，如果强制设置宽度(这里默认高度height值为auto)，会造成不同设备之间不兼容，因为宽度大小固定，所以在电脑，手机上面显示的也是固定的，那么我们该把width值设置为多合适?

如果你遇到以上问题，则可以通过神奇max-width属性来解决，只需要将其属性值设置为100%，字面上理解就是设置元素允许最大宽度为100%。

它的作用(好处)：

• 当图片宽度小于其上一级(父级)元素宽度时，显示的是实际尺寸，无论是在电脑端还是手机端都一样。
• 当图片宽度大于等于其上一级(父级)元素宽度时，显示的是父级元素的宽度，同时适用于电脑端和手机端。

总结：使用max-width属性设置图片宽度简单方便又实用，比传统的使用width属性要好很多，虽然这只是一个小小的细节，但其实做谷歌seo更多的时候也是在做的这些微小部分。