1. 程式人生 > >Bootstrap 樣式之 響應式圖片的處理

Bootstrap 樣式之 響應式圖片的處理

在實際的開發過程中,利用Bootstrap 製作響應式網站,很多時候會涉及到圖片的處理問題,

也就是圖片的縮放問題,我們先來看看自然情況下的圖片顯示:(測試版本 3.x

情景:假設我們在一個 div 中放置一張圖片,div 的寬高都是160px,圖片的寬高也是160px;

          那麼圖片是剛好適應這個 div 的;

         

現在:我們要在更小的螢幕的上顯示,為了更好的顯示,我們縮小div 為80px 寬高,

           這樣我們的圖片就會出現溢位div,也就是比div要大,跑出來了;

         

處理:我們需要給div中的圖片設定最大寬度:max-width:100%; 高度:height:auto;

         也就是讓圖片的大小隨著父級元素div 的變化而縮放;

Bootstrap 的響應式圖片就是按照這樣進行縮放處理,看看Bootstrap中的樣式:

在bootstrap中如何使用響應式圖片?

<img src="..." class="img-responsive" alt="Responsive image">

簡單的新增 class="img-responsive" 即可,很簡單;