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 { width :100%}

Answer 2

它按预期工作。响应性基于宽度，而不是高度。 img-responsive使图片的容器宽度为100％（col-md-4）。随着浏览器缩小，图像宽度也缩小。图像的高度按比例调整（基于图像的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

调整大小时的bootstrap图像高度

2 个答案: