如何在bootstrap不同的两列大小中等于图像高度

Question

我使用两个不同的bootstrap网格列，但网格中的图像高度不相等。如果我固定高度图像看起来拉伸。请参阅下面的代码：

         <div class="row">
              <div class="col-md-8 " >
                 <img class="img-responsive" src="images/green.jpg">
              </div>
              <div class="col-md-4" >
                 <img class="img-responsive" src="images/green.jpg">
              </div>
         </div>

结果我得到了

如何在不拉伸的情况下均衡两个图像的高度。感谢

Answer 1

为每个具有静态高度和可变宽度的图像创建一个包含分隔符。然后，您可以使用background-image和background-size：cover。例如：

class="block no-overflow"

然后对于HTML，请尝试以下操作：

.image-container{
 height: 500px;
 width: 100%;
 background-size: cover;
}

Answer 2

您可以使用解决方案https://jsfiddle.net/bjnpz7q7/

＆＃13;

＆＃13;

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.img-responsive {
  height: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">

  <div class="row">
    <div class="col-md-8">
      <img class="img-responsive" src="http://via.placeholder.com/300.png/09f/fff" />
    </div>
    <div class="col-md-4">
      <img class="img-responsive" src="http://via.placeholder.com/350x150" />
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

首先，你需要确保你的两个cols都有相同的高度。为此，你可以像这样使用flex：

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:   flex;
}
.col-md-8, col-md-4 {
  display: flex;
  flex-direction: column;
}

然后，删除Bootstrap类＆＃34; img-responsive＆＃34;，并将此css应用于您的img标记，如下所示：

.img{
  object-fit: cover;
}

检查我创建的笔here

Answer 4

     <div class="row">
          <div class="col-md-6 " >
             <img class="img-responsive" src="images/green.jpg">
          </div>
          <div class="col-md-6" >
             <img class="img-responsive" src="images/green.jpg">
          </div>
     </div>

尝试此操作会使您的列固定