时间戳

首页 > 解决方案 > CSS - 匹配高度

javascript - CSS - 匹配高度

问题描述

我有一个像这样的简单 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 高度匹配解决方案？

标签： javascriptjqueryhtmlcssflexbox

解决方案

你可以在这里获得更多信息

这是一个例子：

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>

推荐阅读