解决html的图片放大缩小拉伸后变形的问题

源自：https://stackoverflow.com/questions/21226082/css-maintain-image-ratio-whose-height-is-100-when-its-width-would-force-it-to

比如首页上需要一个背景图片，那么设置宽度为100%，高度为auto，那么图片就会始终保持它的长宽比：

img{
    width: 100%;
    height: auto;
}

If you want to retain a consistent height of the parent element then you can either:
（另外如果你想要让图片保持一定的限制，那么你可以采用下面两个方法：）
Hide the overflowing image using overflow: hidden;. Although this means you will lose some of the image at larger sizes. See example：http://jsfiddle.net/g7y5J/2/.

Use max-width and max-height to stop the image growing at a certain point. This means you will potentially be left with some white space in the design. See example：http://jsfiddle.net/g7y5J/1/.