代码之家 › 专栏 › 技术社区 › fightstarr20

CSS-匹配高度

flexbox css html jquery javascript

fightstarr20 · 技术社区 · 6 年前

我有一个简单的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的比例,然后右手图像应该裁剪和填充以匹配左侧的高度。

这就是我要达到的目标。。

2 回复 | 直到 6 年前

octano 6 年前

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>

Temani Afif 6 年前

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前