引導圖像高度調整

當我在HTML/CSS /引導新。我有一個img響應類圖像的問題。當我調整窗口大小時，我無法弄清楚爲什麼它不能保持col-md-4的整個高度。該圖像的尺寸爲：640x426。它的高度越來越小，看起來沒有居中。下面是代碼引導圖像高度調整

<div class="container-fluid">   <!-- BEGINNING OF FEATURES --> 
<div class="row"> 
    <div class="col-md-4"> 

     <div class="features-wrapper right"> 
      <div class="features-icon"> 
       <i class="fa fa-desktop" aria-hidden="true"></i> 
      </div> <!-- ICON --> 
     <div class="features-text"> 
      <h4 class="md-size">Simple design</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum asperiores accusamus ipsa alias quibusdam facilis omnis.</p>  
     </div>  <!-- features-text --> 
     </div>  <!-- Wrapper-right --> 

     <div class="features-wrapper right"> 
     <div class="features-icon"> 
      <i class="fa fa-desktop" aria-hidden="true"></i> 
      </div> 
     <div class="features-text"> 
     <h4 class="md-size">Simple design</h4> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum asperiores accusamus ipsa alias quibusdam facilis omnis.</p>  
     </div> 
     </div> 

    </div>  <!-- END OF COL-MD-4 --> 



    <div class="col-md-4"> 
     <div class="features-wrapper image"> 
      <img class="img-responsive" src="images/tablet-2.jpg" alt=""> 
     </div> 
    </div> 

    <div class="col-md-4"> 

     <div class="features-wrapper left"> 
      <div class="features-icon"> 
       <i class="fa fa-bar-chart" aria-hidden="true"></i> 
      </div> 
     <div class="features-text"> 
      <h4 class="md-size">Designed for your needs</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum asperiores accusamus ipsa alias quibusdam facilis omnis.</p>     
     </div> 
    </div> 

    <div class="features-wrapper left"> 
      <div class="features-icon"> 
       <i class="fa fa-bar-chart" aria-hidden="true"></i> 
      </div> 
     <div class="features-text"> 
      <h4 class="md-size">Designed for your needs</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum asperiores accusamus ipsa alias quibusdam facilis omnis.</p>     
     </div> 
    </div> 
    </div>     <!-- END OF COL-MD-4 -->  
</div>      <!-- END OF ROW -->

這裏是CSS

div.features-wrapper.right .features-text{ 
    text-align: right; 
    padding-right: 60px; 
    margin-bottom: 50px; 
} 

div.features-wrapper.left .features-text{ 
    padding-left: 60px; 
    margin-bottom: 50px; 
} 


h4.md-size{ 
    font-size: 1.5em; 
    font-weight: 400; 

} 

.features-icon{ 
    width: 50px; 
    height: 50px; 
    margin-left: 10px; 
    margin-right: 0px; 
} 
.features-wrapper.right .features-icon{ 
    float: right; 

} 

.features-wrapper.left .features-icon{ 
    float: left; 
} 

.features-icon i{ 
    font-size: 25px; 
    color: #286090; 
}

來源

2016-10-04 Osiris

它的工作如預期。響應性基於寬度而不是高度。 img-responsive使得它的容器（col-md-4）的圖像100％的寬度。作爲具有縮小的瀏覽器，圖像寬度也是如此。圖像的高度按比例調整（基於圖像的HxW）。

您可能迫使圖像爲100％的高度，但隨後it will appear distorted：

.image > .img-responsive { 
    height: 100%; 
}

基本上視口（瀏覽器）的比率不相同的圖像的比例。在這種情況下，由於background-size:cover根據瀏覽器大小使用高度和寬度，背景圖像可能會更好地工作。

.bg-image { 
    background-image:url(//placehold.it/640x426); 
    background-size: cover; 
    background-position: center center; 
    min-height: 300px; 
}

http://www.codeply.com/go/5L6McSklPb

來源

2016-10-04 14:01:42 ZimSystem

我試圖使它保持不變高度時，我調整，所以它看起來具有相同的高度，其他2列。當窗口具有較大的寬度高度是像其他兩列相同，但是當我縮小窗口我的感覺是失去了太多height.I什麼地方看到過這樣的圖像中2列之間，但該圖像保持它的比例是當調整窗口的大小，也有img響應班。我想知道我是否可以做類似的事情，但它可能是圖片大小的問題。 – Osiris

是的，我已經解釋了爲什麼在我的答案。 – ZimSystem

謝謝你的回答。它將它添加爲背景圖片而不是img – Osiris

這這可以解決這個問題。 .img { width :100%}

來源

2016-10-04 12:55:34 Moe

我想補充一點，但它的行爲同樣 – Osiris

引導圖像高度調整

回答

相關問題