Problems with Bootstrap Responsive Images

Question

I have to create a responsive web site app based on the Bootstrap 3 framework.

The Bootstrap 3 way of making things responsive is to have a grid-layout of 12 columns that scale down.

I understand that Bootstrap 3 designs for mobile first and scales up(!!).

The issue is that no matter how I recode the permutations of the 12-column grid system, and no matter if I define min-width, min-height, max-width, max-height, width, height, etc. of the image to define fixed dimensions, the image either scales down really small, or it scales really big - and my client does not like this!!

Here below is code I am working on. First is the HTML code, and then the accompanying CSS code below that is in a separate style sheet (that works fine).

Thank you very much for any help in solving the matter.

<!-- 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

I'm going to guess that you're including the full and unedited version of the Bootstrap CSS - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

The issue that you're having is that within the CSS there is a declaration to ensure that all images are set to be 100%, and with an !important to override any other settings.

img {
    max-width: 100%!important
}

The CSS you have included in only targeting the .logotop class, and in order of css specificity the Bootstrap style for teh img will win out.

Include this as your CSS instead:

.logotop img {
    //your styles here
}