如何在忽略父级设置的高度的情况下停止flexbox容器中的图像? [英] how to stop images within a flexbox container ignoring the heigth set by parent?

问题描述

在过去的几天里，我以为我一直在使用的API一直存在这个问题，但是在绊倒这个

For the past couple of days, I thought the issue I've been having was with the API that i was using but after stumbling upon this article talking about flex:1 issues I've discovered it's not. The article addresses the issue but not for images what's the fix?

HTML

<div className="App">
  <div className="box1">
    <img src={image} />
  </div>
  <div className="box2" />
  <div className="box3" />
</div>

Scss

.App {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .box1{
    flex: 1;
    background: blue;
    display: flex;
    flex-direction: column;
img{
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 300px;
  //try max height 100% breakesit
  //max-height: 100%
  object-fit: cover;
  background-repeat: no-repeat;
}
  }
  
  .box2{
    background: purple;
    height:200px; 
  }
  .box3{
    background: green;
    height: 250px;
  }
}

沙盒

Sandbox

我希望图像占据父级div高度的100％，这可能吗?

I would the like the image to take up 100% of the parent divs height is this possible?

推荐答案

我终于找到了一个合理的解决方案，该解决方案不使用背景图片，而是进一步使用flex box！这是我的解决方案:

I finally found a reasonable fix not using a background image but playing further with flex box! here's my solution:

HTML

 <div className="App">
      <div className="box1">
        <img src={image} />
      </div>
      <div className="box2" />
      <div className="box3" />
    </div>

据我了解，图像具有独特的 flex-basis属性基于实际大小，与 其他所有元素，他们将其用作默认的flex属性 他们成长或缩小的依据，因此将此值设置为 0( flex-basis:0 )使其行为与常规元素相同. 唯一的问题就是图像的高度 不管设置的百分比是多少，都可以固定为0px 添加 flex-grow:1 属性

It turns out as far as I can understand images have there own unique flex-basis property based on there actual size which is different from every other element and they use this as there default flex property which they grow or shrink from, so setting this value to 0(flex-basis:0) makes it behave the same way as a regular element. The only issue with this on its own is the height of the image will stay at 0px no matter the percentage set this can simply be fixed by adding the flex-grow:1 property

无礼

.App {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .box1{
    display: flex;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    flex-basis: 0;
    background: blue;
    overflow: hidden;

    img{
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
      background-repeat: no-repeat;
      margin: auto;
    }
  }
  
  .box2{
    background: purple;
    height:200px; 
  }
  .box3{
    background: green;
    height: 250px;
  }
}

这是一个代码沙箱向您展示如何玩耍，因为这似乎是一个悬而未决的问题，希望它能帮助一些像我一样苦苦挣扎的人！

Here's a code sandbox demonstrating for you to play around with as this seems to be a largely unanswered question hope it helps some people who were struggling as much as I was!

这篇关于如何在忽略父级设置的高度的情况下停止flexbox容器中的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！