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 
}