Bootstrap Responsive Images的問題

Question

我必須創建一個基於Bootstrap 3框架的響應式網站應用程序。

Bootstrap 3使事物響應的方式是具有12個可縮小的列的網格佈局。

據我所知，Bootstrap 3首先爲移動設計並且可以擴展（!!）。

問題是無論我如何重新編碼12列網格系統的排列，也不管我是否定義了最小寬度，最小高度，最大寬度，最大高度，寬度，高度等要定義固定尺寸的圖像，圖像要麼縮小非常小，要麼縮小非常大 - 我的客戶不喜歡這樣！

下面是我正在處理的代碼。首先是HTML代碼，然後下面的CSS代碼在單獨的樣式表中（工作正常）。

非常感謝您在解決此問題上的任何幫助。

<!-- BEGIN HEADER --> 
<!-- <header> --> 
    <!-- BEGIN container for HEADER DIV --> 
    <!-- BEGIN DIV for top header DIVs --> 
    <div id="headerdivs" class="pad-section"> 
     <div class="container"> 
     <div class="row-fluid" style="height: 200px;"> 


      <div class="col-xs-4 text-center" style="background: blue;"> 
      <p class="lead"></p> 
      </div>  

      <div class="col-xs-4 text-center" style="background: red;"> 
      <div style="position: relative;"> 
       <span class="logotop"><a href="index.html"><img src="images/logo.png" height="200" width="168" alt="" class="img-responsive" /></a></span> 
      </div> 
      </div> 

      <div class="col-xs-4 text-center" style="background: blue;"> 
      <p class="lead"></p> 
      </div> 


     </div> 
     </div> 
    </div> 
    <!-- END DIV for top header DIVs --> 
    <!-- END container for HEADER DIV --> 
<!-- </header> --> 
<!-- END HEADER --> 

.logotop { 

    position:relative; 
    left: 0px; 
    bottom: 0px; 
    color: white; 
    width: 200px; 
    max-width: 200px; 
    min-width: 200px; 
    height: 168px; 
    max-height: 168px; 
    min-height: 168px; 
    z-index:1001; 
} 

Answer 1

我要去猜，你包括引導CSS充分和未經編輯的版本 - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

，你所遇到的問題是，在CSS中有一個聲明確保所有圖像都設置爲100％，並使用!important覆蓋任何其他設置。

img { 
    max-width: 100%!important 
} 

已包含在僅針對.logotop類的CSS，並在CSS特異性引導樣式TEH img將勝出的順序。

包括這個作爲你的CSS來代替：

.logotop img { 
    //your styles here 
}