CSS - высота соответствия

Question

У меня есть простой макет flexbox, как этот ...

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>

Я пытаюсь установить левое изображение с соотношением 16x9, а затем правое изображение следует обрезать и заполнить в соответствии с высотой левого.

Это то, чего я пытаюсь достичь ..

Могу ли я сделать это, используя только CSS, или лучше посмотреть нарешение для подбора высоты javascript?

Answer 1

Вы можете рассмотреть фон для второго изображения:

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>

Answer 2

Вы можете получить больше информации здесь

Вот пример:

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>