CSS-匹配高度

Question

我有一个简单的flexbox这样的布局...

get-distribution

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%;
}

我正在尝试将左图设置为16x9的比例，然后右图应裁剪并填充以匹配左图的高度。

这就是我要实现的目标。

我可以单独使用CSS进行此操作，还是最好查看javascript高度匹配解决方案？

Answer 1

您可以获取更多信息here

这里是一个例子：

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>

Answer 2

您可以考虑第二张图片的背景：

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>