How to adjust side-by-side images to be same height and still fit current screen size?

Question

I am currently working on making side-by-side images dynamic so they can stay side-by-side no matter what screen they are on. However, these images also have different ratios; so, I am using the flex display type to keep them the same height.

Here is my current HTML:

<div class="row">
    <div class="column">
        <img src=(thefirstimage) alt="A picture of me."/>
</div>
    <div class="column">
        <img src=(thesecondimage) alt="Another picture of me."/>
    </div>
</div>

And here is my CSS:

* {box-sizing: border-box;}
.column {
    display: flex;
    flex-direction: row;
    justify-content: center;
    float: left;
    height: 40vh;
    width: auto;
    padding: 5px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

At this point on my computer screen, the images are properly side-by-side at the same height despite the different aspect ratios. However, when I view the same page on my phone one image moves on top of the other.

So to sum up, the two problems I'm trying to get to work together are:

• Resizing side-by-side images to be the same height
• Keeping that no matter what the screen size is

I saw two other posts on here that cover those both separately, I just can't get it to work together.

Thanks ahead of time!

Answer 1

You’ve asked for a solution which allows you to fill the width of the viewport with two images side-by-side with the same height but differing aspect ratios. I’m going to give you a solution to put any number of images of varying aspect-ratios side-by-side.

The first part of the solution is a flexbox with a fixed height, with the flex items (images) each styled with 100% height. This gives you an image strip with all images having the same height, and with their width determined by their aspect ratio.

Let’s try with five images with aspect ratios as follows:

• 1:1
• 3:2
• 16:9
• 4:3
• 9:16

If the flexbox is short (has a small height) it will render like this:

Here is a working snippet to demonstrate the solution so far. Make sure after running it you use the full page link to get the full effect.

document.getElementById('i1').addEventListener('input', evt => {
  document.querySelector('.img-row').style.height = evt.target.value + 'px';
})

body {
  background: silver;
  margin: 1em;
}

.img-row {
  display: flex;
  gap: 5px;
  background-color: white;
  height: 50px;
}

.img-row > img {
  height: 100%;
}

<p>Wait for it ... images can be slow to load ...</p>

<p>Adjust row height: <input id="i1" type="range" min="50" max="300" value="50" step="50"></p>

<div class="img-row">
  <img src="https://picsum.photos/200/200" title="1:1">
  <img src="https://picsum.photos/300/200" title="3:2">
  <img src="https://picsum.photos/320/180" title="16:9">
  <img src="https://picsum.photos/240/180" title="4:3">
  <img src="https://picsum.photos/99/176" title="9:16"> <!-- portrait -->
</div>

Did you use the full page link?

Now the only remaining challenge is to dynamically adjust the height of the flexbox so that the images exactly fill the width of the screen. If we can determine the aspect ratio that the flexbox needs to have, we can use that together with the viewport width to calculate our desired height.

Fortunately, if we know the aspect ratios of each of the images in the row, we simply need to sum these ratios to obtain the aspect ratio when they are arranged beside each other. Let's do this for the five images in our example, which are:

• 1:1 = 1
• 3:2 = 1.5
• 16:9 = 1.777
• 4:3 = 1.333
• 9:16 = 0.5625

Add these up and the result is 6.17. So we simply divide our viewport width (minus the sum of the gaps, if we want gaps) by 6.17 to obtain the desired height of our flexbox.

Here is a snippet which implements this algorithm. It does not depend on knowing the aspect ratios of the images ahead of time, rather it waits for the images to load and then checks their naturalWidth and naturalHeight. Note that because it listens for resize events, which are fired rapidly when a browser window is stretched with a mouse, we need to debounce for performance reasons.

Again, after running the snippet please use the full page link and adjust the size of your browser window to test the responsiveness.

let debounceTimer

const recalc = () => {
  const imgRow = document.querySelector('.img-row')
  const images = Array.from(imgRow.children)

  const colGap = 5   // 5 pixels, to match the column-gap on .img-row
  const totalGap = (images.length - 1) * colGap

  let ratioSum = 0
  images.forEach(img => {
    ratioSum += img.naturalWidth / img.naturalHeight
    img.style.opacity = "1"
  })
  imgRow.style.height = ((imgRow.offsetWidth - totalGap) / ratioSum) + 'px'
}

// run this when all the images have finished loading, so we have access to their intrinsic sizes
addEventListener('load', () => {
  recalc()
})

addEventListener('resize', () => {
  clearTimeout(debounceTimer)
  if (document.readyState === "complete")
    debounceTimer = setTimeout(recalc, 200)
})

body {
  background: silver;
  margin: 1em;
}

.img-row {
  display: flex;
  column-gap: 5px;
  background-color: white;
  height: 50px;       /* initial value, overridden by script */
  transition: 300ms;
}

.img-row > img {
  height: 100%;
  opacity: 0;         /* initial value, overridden by script */
}

<p>Wait for it ... images can be slow to load ...</p>
<div class="img-row">
  <img src="https://picsum.photos/200/200" title="1:1">
  <img src="https://picsum.photos/300/200" title="3:2">
  <img src="https://picsum.photos/320/180" title="16:9">
  <img src="https://picsum.photos/240/180" title="4:3">
  <img src="https://picsum.photos/99/176" title="9:16"> <!-- portrait -->
</div>

Did you use the full page link?

For further reading, see this thread.