圖片在響應式布局中需要做到適應不同寬度的媒介給出最佳顯示方案,如水一樣會隨着寬度的改變而改變。
在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。
- background-size:cover; 等比擴展圖片來填滿元素
- background-size:contain; 等比縮小圖片來適應元素的尺寸
來源:http://www.wondercss.com/2013/html-css/368/