多个图像css的高度答案

【问题标题】：height of multiple images css多个图像css的高度
【发布时间】：2017-11-02 00:54:16
【问题描述】：

是否可以在一行中有 2 个不同的图像并将它们缩放完全相同？可以说我有这样的事情：

.container {
  max-width:1200px;
  margin:0 auto;
  overflow:hidden
}

.left {
  float:left
  width:70%;
}

.right {
  width:30%
  float:right;
}

<div class='container'>
  <div class='left'>
    img here
  </div>
  <div class='right'>
    img here
  </div>
</div>

现在我想将图像与容器的宽度相匹配。然后，当减小浏览器的大小时，我想以相同的高度缩放它们。我能做到吗？我正在考虑这样的事情：http://prntscr.com/h0j2lj

【问题讨论】：

标签： css image height scalable

【解决方案1】：

从您的描述中不太清楚您要达到什么效果，因此此示例可能与您的实际任务无关。一段代码以 70/30 的比例一张一张地显示到图像并缩放它们。图像放在背景上，因此它们可能不会在每个布局中都完全可见。

.container {
  max-width:1200px;
  margin:0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.left, .right {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 200px;
}

.left {
  flex: 7 7 70%;
}

.right {
  flex: 3 3 30%;
}

<div class='container'>
  <div class='left' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4d/Bees_Collecting_Pollen_cropped.jpg)">
  </div>
  <div class='right' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5d/Crateva_religiosa.jpg)">
  </div>
</div>

【讨论】：

这就是我想要的结果，但我可以用 img 标签做到这一点吗？
很可能不是因为，如您所见，元素的纵横比在调整浏览器窗口大小时会发生变化，而<img> 标签无法做到这一点。所以在这种情况下后台解决方案更好
当然，如果您的图像本身具有相同的高度并且具有 70 / 30 的大小百分比（因此它们完全适合您的布局） - 可以通过 <img> 进行这样的布局使用弹性盒。但一般情况下是不可能的。

【解决方案2】：

这显示了相同的图像，左侧缩放了 70%，右侧缩放了 30%。

.container {
  max-width:1200px;
  margin:0 auto;
  overflow:hidden
}

.left {
  float:left;
  width:70%;
}

.left img{
  width: 100%;
}

.right {
  width:30%;
  float:left;
}

.right img{
  width:100%;
}

<div class='container'>
  <div class='left'>
    <img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
  </div>
  <div class='right'>
    <img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
  </div>
</div>

【讨论】：