Equal Image height within columns

Question

I am trying to place some images in two columns. One image in the left column and two images in the right column. The two images in the right column should have the same height as the image in the left. How can I achieve this ?

Screenshot

<div class="container">
    <div class="row">
      <div class="col-md-9">
        <img class="img-responsive" src="img/2.jpg" alt="">
      </div>
      <div class="col-md-3">
          <img class="img-responsive" src="img/4.jpg" alt="">

      </div>
      <div class="col-md-3">
          <img class="img-responsive" src="img/4.jpg" alt="">

      </div>
    </div>
</div>

.hero-header{
  position: relative;
}

.hero-headline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Please could you share the CSS that you have tried so far so we can see what you have tried. — Mike Poole, Aug 14 '19 at 15:55
duplicate - https://stackoverflow.com/questions/42946454/make-a-div-span-two-rows-in-a-grid — Paulie_D, Aug 14 '19 at 17:16

score -1 · Answer 1 · answered Aug 14 '19 at 15:57

-1

Just use your already created class img-responsive and set height:100% or whatever number your are looking for. Like this, all the images will have the same height for sure.

answered Aug 14 '19 at 15:57

Pedro Figueiredo

2,304
1
11
18

Equal Image height within columns

1 Answers1