Html 在flex容器中保持图像的纵横比

我有一组3张图片：

我希望它们根据浏览器宽度保持纵横比

我试过flex box，但左图像和右图像之间的高度总是有差异

我找到的实际解决方案是将左侧图像放在背景中，背景大小为：cover

flex box有没有办法管理这样的自动比率

.container img{
显示器：flex；
宽度：100%；
弹性基准：100%；
证明内容：之间的空间；
背景：金；
}
.图片大{
弹性：10 calc（77.6%-10 px）；
}
.图片大img{
宽度：100%；
}
.闭塞img{
文本对齐：右对齐；
}
.块img img{
宽度：计算（100%-10px）；
}
.区块img img：第一个孩子{
边缘底部：10px；
}
img{
垂直对齐：中间对齐；
}

---

我使用SaSS实现了您的要求

标记：

<div class="container-img">
  <div class="picture-large">
    <img src="http://media-cache-ec0.pinimg.com/originals/8a/70/5e/8a705e6e7d9dc34eb26cb41ac20ac9ca.jpg" alt="">
  </div>
  <div class="block-img">
    <img class="picture" src="http://static1.decosoon.com/70282-large_atch/puppy-kitten-hug-painting.jpg">
    <img class="picture" src="http://us.123rf.com/450wm/azalia/azalia1308/azalia130800062/21936902-fluffy-cat-in-a-pan--striped-not-purebred-kitten-kitten-on-a-white-background-small-predator-small-c.jpg">
  </div>
</div>

default.css输出如下：

@charset "UTF-8";
.container-img {
width: 100%;
display: flex;
flex-basis: 100%;
background: gold;
display: flex;
justify-content: center;
align-items: center;
}
.container-img .picture-large {
float: left;
width: 100%;
object-fit: contain;
}
.container-img .picture-large img {
max-width: 100%;
height: auto;
}
.container-img .block-img {
justify-content: center;
align-items: center;
width: 30%;
float: right;
background: green;
}
.container-img .block-img img {
width: 100%;
max-width: 350px;
max-height: 350px;
}

---

我用SaSS来达到你的要求

标记：

<div class="container-img">
  <div class="picture-large">
    <img src="http://media-cache-ec0.pinimg.com/originals/8a/70/5e/8a705e6e7d9dc34eb26cb41ac20ac9ca.jpg" alt="">
  </div>
  <div class="block-img">
    <img class="picture" src="http://static1.decosoon.com/70282-large_atch/puppy-kitten-hug-painting.jpg">
    <img class="picture" src="http://us.123rf.com/450wm/azalia/azalia1308/azalia130800062/21936902-fluffy-cat-in-a-pan--striped-not-purebred-kitten-kitten-on-a-white-background-small-predator-small-c.jpg">
  </div>
</div>

default.css输出如下：

@charset "UTF-8";
.container-img {
width: 100%;
display: flex;
flex-basis: 100%;
background: gold;
display: flex;
justify-content: center;
align-items: center;
}
.container-img .picture-large {
float: left;
width: 100%;
object-fit: contain;
}
.container-img .picture-large img {
max-width: 100%;
height: auto;
}
.container-img .block-img {
justify-content: center;
align-items: center;
width: 30%;
float: right;
background: green;
}
.container-img .block-img img {
width: 100%;
max-width: 350px;
max-height: 350px;
}

---

顶部和底部仍然有空间image@romuleald如果您的意思是围绕整个帧，则默认情况下，边距设置为主体，可以通过执行主体：边距：0；至于小狗图像顶部和底部的“空间”，这是实际图像的一部分，与代码无关。使用inspect element亲自查看或复制cat图像，一切正常。我发现您使用的是IE不支持的

对象拟合

。黄色背景显示内部仍有空白。顶部和底部都有空白image@romuleald如果你指的是整个画面，即默认设置为主体的边距，可通过执行主体：边距：0；至于小狗图像顶部和底部的“空间”，这是实际图像的一部分，与代码无关。使用inspect element亲自查看或复制cat图像即可。我发现您使用的是IE不支持的

对象拟合

。黄色背景显示内部仍有边距