调整大小时引导图像高度

Question

我是 html/css/bootstrap 的新手。我对具有 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;
}

Answer 1

它按预期工作。响应性基于宽度，而不是高度。 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

Answer 2

这个这个可以解决。 .img { width :100%}