jquery - 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
}

您包含的 CSS 仅针对 .logotop 类，并且为了 css 特异性，img 的 Bootstrap 样式将胜出。

改为将此作为您的 CSS 包括在内:

.logotop img {
    //your styles here
}