響應式佈局的鑰匙之 圖片液態化

圖片在響應式佈局中須要作到適應不一樣寬度的媒介給出最佳顯示方案，如水同樣會隨着寬度的改變而改變。

在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/