html - 如何平均设置 flex 元素高度

<分区>

我有一个 flexbox 容器和两个 flex box 元素:item-img 和 item-content。 item-img 里面有一张图片。我希望 item-img 的高度等于 item-content 的高度并且图像将覆盖它的所有空间。

这意味着 item-img 的高度是基于 item-content 的高度。 item-content 的高度不固定，可能比图像的高度大很多或小很多。

如有任何帮助，我们将不胜感激。非常感谢。

.flex-container {
  display: flex;
  width: 500px;
  border: solid 1px #123;
}

.flex-item {
  max-width: 50%;
  overflow: hidden;
  flex-basis: 50%;
}

.item-img {
  display: flex;
}

img {
  object-fit: cover;
}

<div class="flex-container">
  <div class="flex-item item-img">
    <img src="http://via.placeholder.com/350x350">
  </div>
  <div class="flex-item item-content">
    <p>This is conent with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

最佳答案

将 height: 100% 和 max-width: 100% 设置为 img 并绝对定位图像在 item-img 中(以便容器始终占据 item-content 的高度)- 请参见下面的演示:

.flex-container {
  display: flex;
  width: 500px;
  border: solid 1px #123;
}

.flex-item {
  max-width: 50%;
  overflow: hidden;
  flex-basis: 50%;
}

.item-img {
  display: flex;
  position: relative;
}

img {
  /*object-fit: cover;*/
  height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="flex-container">
  <div class="flex-item item-img">
    <img src="http://via.placeholder.com/350x350">
  </div>
  <div class="flex-item item-content">
    <p>This is content with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

<br/><br/>

<div class="flex-container">
  <div class="flex-item item-img">
    <img src="http://via.placeholder.com/50x50">
  </div>
  <div class="flex-item item-content">
    <p>This is content with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

编辑:为img 添加一个容器并定位它连同object-fit: cover 和width: 100% for the img - 下面的演示:

.flex-container {
  display: flex;
  width: 500px;
  border: solid 1px #123;
}

.flex-item {
  max-width: 50%;
  overflow: hidden;
  flex-basis: 50%;
}

.item-img {
  display: flex;
  position: relative;
}

.item-img div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

img {
  object-fit: cover;
  width: 100%;
}

<div class="flex-container">
  <div class="flex-item item-img">
    <div>
      <img src="http://via.placeholder.com/350x350">
    </div>
  </div>
  <div class="flex-item item-content">
    <p>This is content with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

<br/><br/>

<div class="flex-container">
  <div class="flex-item item-img">
    <div>
      <img src="http://via.placeholder.com/50x50">
    </div>
  </div>
  <div class="flex-item item-content">
    <p>This is content with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

关于html - 如何平均设置 flex 元素高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54917726/

上一篇：javascript - 复选框在映射函数中不起作用 react js css

下一篇：html - 如何保持标题背景图片的纵横比？

相关文章：

javascript - 如何在 Chrome 自动完成时获取输入值

Java在小程序中显示图像

image - 导出图片Excel VBA

ios - 在 React Native 中动态需要图像

javascript - 访问类 ="input-append"的元素

html - 通过获取数据在 whatsapp 网络中共享链接

jquery - 如何将此 JQuery CSS 修改为我的 View ？

php - 我如何更改 Moodle 中 block 的宽度大小？是CSS吗？文件是什么？

css - 在 Internet Explorer IE 上使用 Font Awesome 时遇到问题

javascript - 定位 event.currentTarget 的 child