Equalize two columns using their width

Question

I got three photos, which are arranged in two columns :

The left column contains 1 photo, which is a portrait (width < height)
The right columns contains 2 photos of the exact same size, which are landascapes (width > height)

I would like to make the two columns equal in term of height, such as the height of the left column is equal of the height of the right column.

Since I cannot crop the photos, I have to use the width of columns to make them equal height (which means they are not 50%/50%).

You can see an example here:

<div class="container">
  <div class="left">
    <img src="https://placehold.it/400x900" alt="">
  </div>
  <div class="right">
    <img src="https://placehold.it/500x400" alt="">
    <img src="https://placehold.it/500x400" alt="">
  </div>
</div>

And the associated CSS:

img {
  margin-bottom: 16px;
  max-width: 100%
}

.container {
  width: 700px; /* Container width is fixed */
  display: flex;
}

.left {
   width: 52%; /* I want to change this */
   margin-right: 16px;
}

.right {
  display: flex;
  flex-grow: 1;
  flex-direction: column
}

Live example: https://jsfiddle.net/9f2gom0q/

At the moment, the only solution I found was to manually fix the width of one of the columns, which does sound right and may broke the grid if the photos change.

Does flex-based solution exist ?

hisbvdis · Answer 1 · 2019-09-14T14:11:16.120

I would like to make the two columns equal in term of height

In flexbox, columns are already the same height by default. It’s just that visually they look different to you.

1) Do not forget about "height: 100%" for "img"

2) Instead of a "margin-bottom: 15px;" for "img" is better to use

img + img {
    margin-top: 15px;
}

3) It is bad idea to use <img> as flex-element. It is better to wrap in into addition <div>

Result:

https://jsfiddle.net/wuzgvkp3/1/

img {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  width: 700px;
  margin: 0 auto;
  border: 1px solid #000;
}

.col {
  flex-basis: 50%;
  margin: 7.5px;
}

.col--right {
  display: flex;
  flex-direction: column
}

.col--right .item {
  height: calc(50% - 7.5px);
}

.col--right .item+.item {
  margin-top: 15px;
}

<div class="container">
  <div class="col col--left">
    <div class="item">
      <img src="https://placehold.it/400x900" alt="">
    </div>
  </div>
  <div class="col col--right">
    <div class="item">
      <img src="https://placehold.it/500x400" alt="">
    </div>
    <div class="item">
      <img src="https://placehold.it/500x400" alt="">
    </div>
  </div>
</div>

That's work, but as you can see, photos are streched, which is not desirable in my case... — Mathieu Bour, Sep 14 '19 at 19:31

score 1 · Accepted Answer · answered Sep 14 '19 at 14:13

1

This can be done using CSS grid:

img {
  max-width: 100%
}

.container {
  max-width: 700px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  grid-gap: 16px;
}

.left {
  grid-row: span 2;
  height: 100%;
  
  animation:h 10s  infinite;
}


/* A hack to force the correct rendring*/
@keyframes h{
 from {
  height:99.9%;
 }
}

<div class="container">
  <img class="left" src="https://placehold.it/400x900" alt="">
  <img src="https://placehold.it/500x400" alt="">
  <img src="https://placehold.it/500x400" alt="">
</div>

answered Sep 14 '19 at 14:13

Temani Afif

245,468
26
309
415

Awesome! But can you explain me where that hack come from and what is it purpose? – Mathieu Bour Sep 14 '19 at 19:30
1

@MathieuBour the purpose of this hack is to force the calculation of the height correctly. percentage height are sometimes tricky. By the way, this works fine on Chrome, firefox is giving bad result. Will try to find a solution – Temani Afif Sep 14 '19 at 23:28
Thank you for the explanation, I will search too. Do you have any reference for this bug? – Mathieu Bour Sep 14 '19 at 23:30
@MathieuBour it's not really a bug but a complex behavior related to percentage value and not all the browser handle it the same way. basically using percentage need a reference and here it's the grid track and the height of the grid track is defined by the content so we have a kind of cycle. Here is an answer where I am explaining an example of such behavior: https://stackoverflow.com/a/52137966/8620333 – Temani Afif Sep 14 '19 at 23:37

Equalize two columns using their width

2 Answers2