响应式布局的钥匙之 图片液态化

图片在响应式布局中需要做到适应不同宽度的媒介给出最佳显示方案，如水一样会随着宽度的改变而改变。

在HTML内的图片，比如文章里插入的图片我们可以通过CSS样式 max-width 来进行控制图片的最大宽度，如：

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

如此设置后ID为content内的图片会根据content的宽度改变以达到等宽扩充。 height 为 auto 的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

在WEB显示出来的图片除了 <img> 标签的图片外，还有 CSS 设置的背景图片。比如 logo 为背景图片：

<h1 id="logo"><a href="/">wondercss</a></h1>

#logo a { display:block; width:100%; height:40px; text-indent:-555em; background-image:url(logo.png); background-repeat:no-repeat; background-size:100% 100%; }

background-size 是CSS3的新属性，用于设置背景图片的大小，有2个可选值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定1个值得，则第2个值默认为auto。

1. background-size:cover; 等比扩展图片来填满元素
2. background-size:contain; 等比缩小图片来适应元素的尺寸

 

来源：http://www.wondercss.com/2013/html-css/368/