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

查看：18
本文介绍了如何平等地设置弹性项目的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个弹性盒容器和两个弹性盒项目:item-img 和 item-content.item-img 里面有一张图片.我希望 item-img 的高度等于 item-content 的高度，并且图像将覆盖它的所有空间.

这意味着item-img的高度是基于item-content的高度设置的.item-content 的高度不是固定的，可能比图片的高度大很多，也可以小很多.

任何帮助将不胜感激.非常感谢.

.flex-container {显示:弹性；宽度:500px；边框:实心 1px #123；}.flex-item {最大宽度:50%；溢出:隐藏；弹性基础:50%；}.item-img {显示:弹性；}图片{适合对象:覆盖；}

<div class="flex-item item-img"><img src="http://via.placeholder.com/350x350">
<div class="flex-item item-content"><p>这与文字一致</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p>

解决方案

将 height: 100% 和 max-width: 100% 设置为 img 并将图像绝对定位在 item-img 内(以便容器始终采用 item-content 的高度) - 见演示如下:

.flex-container {显示:弹性；宽度:500px；边框:实心 1px #123；}.flex-item {最大宽度:50%；溢出:隐藏；弹性基础:50%；}.item-img {显示:弹性；位置:相对；}图片{/*对象适合:封面；*/高度:100%；最大宽度:100%；位置:绝对；顶部:0；左:0；}

<div class="flex-item item-img"><img src="http://via.placeholder.com/350x350">
<div class="flex-item item-content"><p>这是带有文本的内容</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p>

<br/><br/><div class="flex-container"><div class="flex-item item-img"><img src="http://via.placeholder.com/50x50">

<div class="flex-item item-content"><p>这是带有文本的内容</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p>

EDIT:为 img 添加一个容器并定位它与 object-fit:cover 和width: 100% 对于 img - 下面的演示:

.flex-container {显示:弹性；宽度:500px；边框:实心 1px #123；}.flex-item {最大宽度:50%；溢出:隐藏；弹性基础:50%；}.item-img {显示:弹性；位置:相对；}.item-img div {位置:绝对；顶部:0；左:0；右:0；底部:0；}图片{适合对象:覆盖；宽度:100%；}

<div class="flex-item item-img"><div><img src="http://via.placeholder.com/350x350">

<div class="flex-item item-content"><p>这是带有文本的内容</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p>

<br/><br/><div class="flex-container"><div class="flex-item item-img"><div><img src="http://via.placeholder.com/50x50">

<div class="flex-item item-content"><p>这是带有文本的内容</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p><p>更多文字</p>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆