Bootstrap - 两列高度相同，内部有三个响应图像（一个左，两个右）答案

【问题标题】：Two columns same height with three responsive images inside (one left and two right)Bootstrap - 两列高度相同，内部有三个响应图像（一个左，两个右）
【发布时间】：2017-10-15 19:29:18
【问题描述】：

我已经尝试过这里发布的不同解决方案来获得具有相同高度的两列，但不幸的是我无法让它工作。问题是，我有三张图片，一张在“人像模式”的左侧，两张在“横向模式”的右侧。我希望右侧的两个图像一起具有与左侧图像相同的高度。

我认为这可能是一个解决方案，但我没有让它起作用：右侧的两个项目的高度可能是左侧 div 的 50%。然后项目内的图像应该填充高度并具有自动宽度。

像这样：Image of what I want.

到目前为止，我的基本代码如下所示：https://jsfiddle.net/qg7t976L/

.padding-0 {
  padding: 0;
}

img {
  width: 100%;
}

img {
  border: 1px white solid;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="work" class="content">
  <div class="container-fluid work-body">
    <div class="row">
      <div class="padding-0 col-sm-6">
        <div class="work-inner">
          <div class="work-item">
            <img src="http://placehold.it/500x750" alt="work1">
          </div>
          <!--/.work-item-->
        </div>
        <!--/.work-inner-->
      </div>
      <div class="padding-0 col-sm-6">
        <div class="padding-0 work-inner col-sm-12">
          <div class="work-item">
            <img src="https://placehold.it/450x250" alt="work2">
          </div>
          <!--/.work-item-->
        </div>
        <div class="padding-0 work-inner col-sm-12">
          <div class="work-item">
            <img src="https://placehold.it/500x250" alt="work3">
          </div>
          <!--/.work-item-->
        </div>
      </div>
    </div>
  </div>
  <!--/.container-->
</div>
<!--/work-->

【问题讨论】：

请贴出代码
抱歉，我还在编辑我的文字，但按回车键并提交了问题...

标签： html css twitter-bootstrap height equal-heights

【解决方案1】：

你可以试试这些代码。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row row--equal">
      <div class="col-md-6 no-padding">
        <div class="item item--full-height">
          <img src="https://i.stack.imgur.com/WS7U5.png" alt="">
    </div>
  </div>
  <div class="col-md-6 item--half-height no-padding">
    <div class="item ">
      <img src="https://i.stack.imgur.com/cslWU.png" alt="">
    </div>
    <div class="item item--half-height">
      <img src="https://i.stack.imgur.com/niAPD.png" alt="">
    </div>
  </div>
</div>
  </div>
</body>
</html>

CSS：

.row--equal{
  display: flex;
}
.no-padding{
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.item{
  margin-right: 1px;
  margin-bottom: 1px;
}
.item img{
  width: 100%;
  height: 100%;
}
.item--full-height{
  height: 100%;
}
.item--half-height{
  height: 50%;
}

【讨论】：