使用 Flexbox 不设置任何固定高度的等高图像？答案

【问题标题】：Equal Height Images Using Flexbox without setting any fixed height?使用 Flexbox 不设置任何固定高度的等高图像？
【发布时间】：2020-10-12 06:10:29
【问题描述】：

您好，我正在尝试在 wordpress 网站中使用 Flexbox 使两个图像高度相同。

这是我的代码：

.wrapper {
  display: flex;
}

.wrapper > div:first-child {
  margin-left: 15px;
}

.wrapper img{
 width:150px;
}

<div class="wrapper">
<div class="img1"><img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-1882120_1280-3.png" />

<p>WordPress is the world’s most popular site builder. It powers more than 33% of all websites on the internet, that’s millions of websites all over the world.</p>
</div>

<div class="img2"><img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-923188_1280-2.jpg" />
<p>WordPress started as a simple blogging platform back in 2003. Since then it has evolved to become a content management system and an application development framework.</p>
</div>
</div>

【问题讨论】：

为什么不像宽度那样在 img 上固定一个固定高度？
但是我不想设置一个固定的高度，它会在较小的屏幕上破坏我的图像有什么方法可以使用 flexbox 吗？？
您需要像我一样在容器中设置图像。如果你真的不能，你可能有办法使用 flex，但更复杂

标签： html css wordpress flexbox grid

【解决方案1】：

我将图像设置到具有固定高度的容器img-container 中。我将您的img 设置如下：

.img-container{
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.wrapper img{
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我还将您的 2 div img 设置如下：

.img1, .img2{
  width: 50%;
}

最终结果：

.wrapper {
  display: flex;
}

.wrapper > div:first-child {
  margin-left: 15px;
}
.img1, .img2{
  width: 50%;
}
.img-container{
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.wrapper img{
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrapper">
  <div class="img1">
    <div class="img-container">
      <img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-1882120_1280-3.png" />
    </div>
    <p>WordPress is the world’s most popular site builder. It powers more than 33% of all websites on the internet, that’s millions of websites all over the world.</p>
  </div>

  <div class="img2">
    <div class="img-container">
      <img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-923188_1280-2.jpg" />
    </div>
    <p>WordPress started as a simple blogging platform back in 2003. Since then it has evolved to become a content management system and an application development framework.</p>

  </div>
</div>

【讨论】：

当我调整浏览器大小时，我的图像仍然在较小的屏幕中被破坏
@Mar 在这里我纠正了一点overflow: hidden 技巧
我无法调整浏览器大小，您会看到高度问题
@Mar 你必须明白，两张基本尺寸不同的基本图像永远不会比这更好。我刚刚检查了手机和电脑的图像大小总是在同一条线上。所以我想如果你想变得更好，你需要手动调整和剪切图像以获得你想要的结果。但你不会变得更好
是的，你说得对，也许弹性盒子更复杂

【解决方案2】：

我添加了 100px 的高度

.wrapper {
  display: flex;
}

.wrapper > div:first-child {
  margin-left: 15px;
}

.wrapper img{
 width:150px;
 height: 100px;
}

<div class="wrapper">
<div class="img1"><img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-1882120_1280-3.png" />

<p>WordPress is the world’s most popular site builder. It powers more than 33% of all websites on the internet, that’s millions of websites all over the world.</p>
</div>

<div class="img2"><img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-923188_1280-2.jpg" />
<p>WordPress started as a simple blogging platform back in 2003. Since then it has evolved to become a content management system and an application development framework.</p>
</div>
</div>

【讨论】：

有没有办法在不设置固定高度的情况下制作相同的高度可以使用flexbox完成吗？？
如果原始图像的高度不相等，那么你必须设置高度，你不能用 flexbox 指定高度，flexbox 只是用于布局