Question

给定一组元素 - 比如说图像 - 具有不同的分辨率：将这些元素按比例调整到相同高度的最简洁方法是什么，以便元素占用100％的包含元素？

为了澄清这个问题，下面的例子通过两个步骤（通过首先将元素调整到相同的高度并随后更改宽度以匹配容器）可视化我想要做的事情，请参阅https://jsfiddle.net/vawn69rn/ < / p>

<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>

然而，与该示例相反，我对便携式解决方案感兴趣，而不对任何值进行硬编码。

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

Answer 1

使用flexbox：我使主容器弯曲，容器保持假想的图像。见下面的代码。但我尝试用真实的图像。你应该尝试一下，看看它的外观。希望这有帮助

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

步骤1，均衡高度：将一些高度设置为容器div＆amp;将图像高度设置为100％。这将在调整大小时保持纵横比。你不应该调整身高和身高。宽度，仅在图像的情况下。

.div1 {
    height: 200px;
}
.div1 img {
    height: 100%;
}

步骤2，使用容器的整个宽度：与上一个相同，但将宽度设置为100％而不是宽度。

.div1 {
    width: 200px;
}
.div1 img {
    width: 100%;
}

CSS：按比例缩放的元素的全宽行

2 个答案: