Bootstrap 4 - Two small align images beside a large image

Question

I'm trying to achieve this using Bootstrap 4.

_{(source: imgh.us)}

two muppets

As seen on the image I need 2 columns both having same height, no matter what is the resolution of the pictures inside. The left one is having one big picture and the right one 2 small ones with some gap aligned perfectly to the big one.

Any help would be really appreciated!

My code so far:

HTML:

            <div class="row">
            <div class="col-lg-6">

              <div class="imagebox">
              <img class="img-fluid" src="https://placehold.it/1000x1000" alt="">
              </div>

            </div>

            <div class="col-lg-6">
                  <div class="imagebox">
                  <img class="img-fluid" src="https://placehold.it/400x600" alt="">
                  </div>

                  <div class="spacer30"></div>

                  <div class="imagebox">
                  <img class="img-fluid" src="https://placehold.it/400x600" alt="">
                  </div>

            </div>                  
        </div>

CSS:

.imagebox{
    overflow: hidden;
    width: 100%;
    height: auto;
}

.spacer30{
    height:30px;
}

score 0 · Accepted Answer · answered May 07 '17 at 15:19

It should be something like this.

(Run code snippet and open in full page)

$(document).ready(function() {
    var loImage = $('#myHeightImage'),
        loSideImages = $('#sideImages');

    // http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
    loImage.on("load", function() {
        loSideImages.height(loImage.height());
    });

    window.onresize = function(event) {
        loSideImages.height(loImage.height());
    };
});

div.col-md-6 div {
  height: 50%;
  background-position: center;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

<div class="container">
  <div class="row">
    <img src="http://lorempixel.com/1280/720/people" id="myHeightImage" class="col-md-6"/>
    <div id="sideImages" class="col-md-6">
      <div style="background-image: url(http://lorempixel.com/1280/720/animals)"></div>
      <div style="background-image: url(http://lorempixel.com/1280/720/nature)"></div>
    </div>
  </div>
</div>

Works good thank you, but how to add gap between? Also any way to use CSS only? — MNedelchev, May 07 '17 at 15:32

this.girish · Answer 2 · 2017-05-07T17:26:04.653

well @Quanta is correct, gave you a perfect example , if you want to add gap between right images you can add margin-bottom:1px to your right-top image, might help you, check out this snippet

$(document).ready(function() {
    var loImage = $('#myHeightImage'),
        loSideImages = $('#sideImages');

    // http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
    loImage.on("load", function() {
        loSideImages.height(loImage.height());
    });

    window.onresize = function(event) {
        loSideImages.height(loImage.height());
    };
});

div.col-md-6 div {
  height: 50%;
  background-position: center;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

<div class="container">
  <div class="row">
    <img src="http://lorempixel.com/1280/720/people" id="myHeightImage" class="col-md-6"/>
    <div id="sideImages" class="col-md-6">
      <div style="background-image: url(http://lorempixel.com/1280/720/animals);
margin-bottom: 1px;"></div>
      <div style="background-image: url(http://lorempixel.com/1280/720/nature)"></div>
    </div>
  </div>
</div>

Bootstrap 4 - Two small align images beside a large image

2 Answers2