'Two columns same height with three responsive images inside (one left and two right)

I already tried different solutions posted here to get two columns with the same height, but unfortunately I can't get this to work. The Problem is, that I have three images, one on the left in "portrait mode" and two on the right in "landscape mode". I want both images together on the right to have the same height as the image on the left.

I think that this could be a solution, but I didn't get this to work: The two items on the right could each have a height of 50% of the div on the left. The images inside the item then should fill the height and have an auto width.

Like this: Image of what I want.

Here is what my basic code looks so far: 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-->
htmlcsstwitter-bootstrapheight


Solution 1:[1]

You can try with these code.

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%;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BizedKhan

Related Questions