html - CSS:按比例缩放的元素的全宽行

Question

给定一组不同分辨率的元素(比方说图像):将这些元素按比例调整到相同高度的最简洁方法是什么，以便元素占据包含元素的 100%？

为了澄清这个问题，以下示例形象化了我尝试分两步执行的操作(首先将元素调整到相同的高度，然后更改宽度以匹配容器)，请参阅 https://jsfiddle.net/vawn69rn/

<span>
  <h1>Initial images:</h1>
  <div style="background-color:red; height: 200px; width:100px; float: left;"></div>
  <div style="background-color:green; height: 100px; width:100px; float: left;"></div>
  <div style="background-color:blue; height: 50px; width:50px; float: left;"></div>
  <div style="background-color:black; height: 100px; width:200px; float: left;"></div>
  <div style="clear:both;"></div>
</span>

<span>
  <h1>Container:</h1>
  <div style="background-color:none; border: #000 solid 1px; height: 200px; width:300px; "></div>
</span>

<span>
  <h1>Step 1, equalise height:</h1>
  <div style="background-color:red; height: 200px; width:100px; float: left;"></div>
  <div style="background-color:green; height: 200px; width:200px; float: left;"></div>
  <div style="background-color:blue; height: 200px; width:200px; float: left;"></div>
  <div style="background-color:black; height: 200px; width:400px; float: left;"></div>
  <div style="clear:both;"></div>
</span>

<span>
  <h1>Step 2, Use full width of container:</h1>
  <div style="background-color:none; border: #000 solid 1px; height: 200px; width:300px; ">
    <div style="background-color:red; height: 66.66px; width:33.33px; float: left;"></div>
    <div style="background-color:green; height: 66.66px; width:66.66px; float: left;"></div>
    <div style="background-color:blue; height: 66.66px; width:66.66px; float: left;"></div>
    <div style="background-color:black; height: 66.66px; width:133.33px; float: left;"></div>
  </div>
  <div style="clear:both;"></div>
</span>

然而，与示例相反，我对无需硬编码任何值的可移植解决方案感兴趣。

我想这可以使用 flexboxes 来实现，但我还没有找到一个干净的解决方案。

Answer 1

使用 flexbox:我将主容器设为 flex，将容纳假设图像的容器设为 flex。请参阅下面的代码。但我尝试用真实的图像。你应该尝试一下，看看它看起来如何。希望这有帮助

.container {
    display: flex;
    border: #000 solid 1px;
    height: 200px;
    width: 300px;
}
.step1 {
  display: flex;
  height: 50px;
  width: 100%;
}
.step1 div {
  height: 100% !Important;
}

<div class="container">
  <div class="step1">
    <div style="background-color:red; height: 200px; width:100px; float: left;"></div>
    <div style="background-color:green; height: 200px; width:200px; float: left;"></div>
    <div style="background-color:blue; height: 200px; width:200px; float: left;"></div>
    <div style="background-color:black; height: 200px; width:400px; float: left;"></div>  
  </div>
</div>