Bootstrap響應圖像問題

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

我猜想您包括了Bootstrap CSS的完整和未經編輯的版本-https: //maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

您遇到的問題是CSS內有一個聲明，以確保將所有圖像都設置為100％，並帶有!important來覆蓋任何其他設置。

img {
    max-width: 100%!important
}

僅包含針對.logotop類的CSS，並且按照CSS的特定順序， img的Bootstrap樣式將勝出。

包括以下內容作為您的CSS：

.logotop img {
    //your styles here
}