如何平均设置弹性项目高度 [英] How to set flex item height equally

问题描述

我有一个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%用于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> 

I have a flexbox container and two flex box items: item-img and item-content. item-img have an image in it. I want item-img have height equal the height of item-content and the image will cover all space of it.

It means the item-img's height is set based on the item-content's height. The item-content's height is not fixed and may much bigger or much smaller than the height of the image.

Any help would be appreciated. Thanks so much.

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

解决方案

Setting height: 100% and max-width: 100% to img and position the image absolutely inside the item-img (so that the container always takes the height of the item-content) - see demo below:

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

EDIT: Adding a container for the img and positioning it along with object-fit: cover and width: 100% for the img - demo below:

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

这篇关于如何平均设置弹性项目高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！