title: Problems with Bootstrap Responsive Images
body: <p>I have to create a responsive web site app based on the Bootstrap 3 framework.</p>
  
  <p>The Bootstrap 3 way of making things responsive is to have a grid-layout of 12 columns that scale down.</p>
  
  <p>I understand that Bootstrap 3 designs for mobile first and scales up(!!).</p>
  
  <p>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!!  </p>
  
  <p>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).</p>
  
  <p>Thank you very much for any help in solving the matter.</p>
  
  <pre><code>&lt;!-- BEGIN HEADER --&gt;
  &lt;!-- &lt;header&gt; --&gt;
    &lt;!-- BEGIN container for HEADER DIV --&gt;
      &lt;!-- BEGIN DIV for top header DIVs --&gt;
      &lt;div id="headerdivs" class="pad-section"&gt;
        &lt;div class="container"&gt;
          &lt;div class="row-fluid" style="height: 200px;"&gt;
  
  
            &lt;div class="col-xs-4 text-center" style="background: blue;"&gt;
               &lt;p class="lead"&gt;&lt;/p&gt;
             &lt;/div&gt;     
  
            &lt;div class="col-xs-4 text-center" style="background: red;"&gt;
              &lt;div style="position: relative;"&gt;
                  &lt;span class="logotop"&gt;&lt;a href="index.html"&gt;&lt;img src="images/logo.png" height="200" width="168" alt="" class="img-responsive" /&gt;&lt;/a&gt;&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="col-xs-4 text-center" style="background: blue;"&gt;
              &lt;p class="lead"&gt;&lt;/p&gt;
            &lt;/div&gt;
  
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- END DIV for top header DIVs --&gt;
    &lt;!-- END container for HEADER DIV --&gt;
  &lt;!-- &lt;/header&gt; --&gt;
  &lt;!-- END HEADER --&gt;
  
  .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;
  }
  </code></pre>