Bootstrap 响应式图像的问题

Question

我必须创建一个基于 Bootstrap 3 框架的响应式网站应用程序。

使事物具有响应性的 Bootstrap 3 方法是具有 12 列的网格布局，可按比例缩小。

我知道，Bootstrap 3 首先是针对移动设备设计的，并且可以扩大规模（！！）。

问题在于，无论我如何重新编码 12 列网格系统的排列，也无论我是否定义了 min-width、min-height、max-width、max-height、width、height 等。定义固定尺寸的图像，图像要么缩小得非常小，要么放大得非常大——我的客户不喜欢这样！！

下面是我正在处理的代码。首先是 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
}