使用CSS設置背景圖片，圖片比較大，完全顯示在一個DIV中

做的時候想要邊框為比較好看的樣式，需要UI切圖並且放在div中，看起來會好看點

 

 

 像這樣的，我隨便挑選了一個，UI幫我切圖出來

 

 

 

 

 

 需要把這個圖片填到相應的div里面，但是很顯然碰到一個問題，圖片太大，而且放進去以后還不是響應式的

那么解決問題的就來了：

background:url(1.jpg);
-webkit-background-size: 100px 60px;

 

這樣還不是響應式應該怎么辦呢

 

IMG加載的圖片width設置為100%，高度會按照width的值自動等比率縮放

背景圖片用background-size 屬性來控制縮放

 background:#00ff00 url(img.jpg) no-repeat;
   background-size:60% 80%;
   -moz-background-size:60% 80%;
   -webkit-background-size:60% 80%;
   -o-background-size:60% 80%;

我當時寫的是
-webkit-background-size:100% 100%;

就完成相要的效果了

 

 

 

再放上相關的

響應式圖像
<img src="..." class="img-responsive" alt="響應式圖像">
通過添加 img-responsive class 可以讓 Bootstrap 3 中的圖像對響應式布局的支持更友好。

接下來讓我們看下這個 class 包含了哪些 css 屬性。

在下面的代碼中，可以看到img-responsive class 為圖像賦予了 max-width: 100%; 和 height: auto; 屬性，可以讓圖像按比例縮放，不超過其父元素的尺寸。

.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
這表明相關的圖像呈現為 inline-block。當您把元素的 display 屬性設置為 inline-block，元素相對於它周圍的內容以內聯形式呈現，但與內聯不同的是，這種情況下我們可以設置寬度和高度。

設置 height:auto，相關元素的高度取決於瀏覽器。

設置 max-width 為 100% 會重寫任何通過 width 屬性指定的寬度。這讓圖片對響應式布局的支持更友好。