CSS - Match height

Question

I have a simple flexbox layout like this...

html, body {
margin:0;
padding:0;
}

.container {
display:flex;
flex-direction:row;
}

.section1 {
width:50%;
}

.section2 {
width:50%;
}

.img_16x9_holder {
    display: block;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

img {
max-width:100%;
}

<div class="container">
  <div class="section1">
    <div class="img_16x9_holder">
      <img src="http://lorempixel.com/g/800/800/" alt="800x800image">
    </div>
  <div class="section2">
    <div class="img_matchheight_holder">
      <img src="http://lorempixel.com/g/300/650/" alt="300x650image">
    </div>
  </div>
</div>

I am trying to set the left image to a 16x9 ratio and then the right hand one should crop and fill to match the height of the left.

This is what I am trying to achieve..

Can I do this using CSS alone, or am I best off looking at a javascript height matching solution?

Possibel duplicate - https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings — Paulie_D, Oct 23 '18 at 09:22

score 1 · Answer 1 · answered Oct 23 '18 at 08:34

You can have more info here

Here is an example:

html, body {
    margin:0;
    padding:0;
}

.container {
    display:flex;

}

.section img{
    height:100%;
}

#sec-1 img{
    /*resize image with % or fixed width depending on the image size*/
    width:50%;
}

#sec-2 img{
    /*resize image with % or fixed width depending on the image size*/
    width:50%;
}

<div class="container">
    <div id="sec-1" class="section">
        <img src="http://lorempixel.com/g/800/800/" alt="800x800image">
    </div>
    <div id="sec-2" class="section">
        <img src="http://lorempixel.com/g/300/650/" alt="300x650image">
    </div>
</div>

score 0 · Answer 2 · answered Oct 23 '18 at 08:55

You can consider background for the second image:

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
}

.section1 {
  width: 50%;
}

.section2 {
  width: 50%;
}

.img_16x9_holder {
  display: block;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.img_matchheight_holder {
  background-size: cover;
  background-position: center;
  flex-grow:1;
  margin-left:5px;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="section1">
    <div class="img_16x9_holder">
      <img src="http://lorempixel.com/g/800/800/" alt="800x800image">
    </div>
  </div>
  <div class="img_matchheight_holder" style="background-image:url(http://lorempixel.com/g/300/650/)">
  </div>
</div>

CSS - Match height

2 Answers2