引导图像高度调整

当我在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

引导图像高度调整

回答

相关问题