Set subsequent column height based on the height of a responsive first column

Question

For those who have marked it as duplicate, i am not trying to achieve this:How can I make Bootstrap columns all the same height?

I am dealing with responsive images while keeping the aspect ratio, dealing with images is not the same thing as just making a column larger.

Please see image below for more information about what i am trying to achieve.

Image:

I got 2 main cols. The first one is divided in 2, and has 2 images 555*670. The second column is divided in a further 2 columns with 4 images.

I would like the images in the second column(266*370) to adapt to the first column. That is the 2nd column should have a combined height which is equivalent to the first column(555*670). The images in the first column and the 4 in the 2nd column should have the same height while maintaining the aspect ratio of the images and should be responsive.

I am open to suggestions like changing the size of the images to achieve this. Here is a link to the CodePen. I used bootstrap grid and set width to 100% on the images.

.img370{
   width:100%;
}
.img555{
   width:100%;
}

You should look at this example : https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Baptiste, Sep 15 '17 at 07:33
@Baptiste It's not what i am trying to achieve, the example you provided is about making the columns length same as the longest column. But i am trying to achieve something else, make the second column the same height of the first. — Nessen, Sep 15 '17 at 08:11
@SebastianBrosch Nope, not related to my question. I had a look at that before posting — Nessen, Sep 15 '17 at 08:12
@Paulie_D I was editing it, adding some more info on the image, should be fine now — Nessen, Sep 15 '17 at 09:17
This might help - https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings — Paulie_D, Sep 15 '17 at 09:31
@Paulie_D Thanks it was quite helpful. Since it's images, we can't add some scrolling bar to it as is the case with text. By reading the post, it seems the answer is to use javascript to get the height of the first image then adjust accordingly. — Nessen, Sep 15 '17 at 09:59

score 0 · Answer 1 · edited Sep 15 '17 at 09:04

0

.row{overflow:hidden;}
.col-* {
     margin-bottom: -99999px;
     padding-bottom: 99999px !important;
}

edited Sep 15 '17 at 09:04

trungk18

19,744
8
48
83

answered Sep 15 '17 at 08:31

Surajit

89
5

I added the codes to the codepen, unfortunately i did not get the desired result. https://codepen.io/nessen/full/oGXZOo/ – Nessen Sep 15 '17 at 09:10

score 0 · Answer 2 · answered Sep 16 '17 at 16:47

I think you'll have an easier time with this if you add the images as background images rather than inline img tags.

Eg CSS

.img555 {
    background-image:url('https://dummyimage.com/555X670/C0C0C0/fff');
    background-repeat:no-repeat;
    background-size:contain;
}

Background-size of contain is probably what you want so that the images aren't cropped, and you may need to set height values for your bootstrap rows so that they don't collapse after you remove the img tags.

Good luck!

Set subsequent column height based on the height of a responsive first column

2 Answers2