怎么使html里图片（img）大小不变形

博客中的图片变形一直困扰了我很久，今天在segmentfault找到了解决方法。

如插入的图片为

<img src="image.gif" width="500px" height="300px" />

这样插入的图片，就是500*300像素的。width代表图片的宽度，height代表图片的高度。控制图片大小比例缩放只需添加

.img{max-width:600px;height:auto;}

表示宽度不得超过600像素，超过的话就缩小到600，高度按照比例缩放。

或者相对于父元素的宽度

.img{max-width:100%;height:auto;}

height:auto也可以写为height:100%，这样图片就不会变形了。