比如首页上需要一个背景图片,那么设置宽度为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/.