如何在 flexbox 中修复图像，忽略容器高度？

Question

您好，在我的项目中，我刚刚设置了一个带有 div 的卡片元素，其中包含顶部的图像和下面的文本。我的问题是当设置为 100% 高度时包含图像的 div 使用卡片的高度而不是父 div 的高度。有谁知道修复方法是什么？

css:

.Cards {
        position: absolute;
        width: 85%;
        height: 85%;
        background: white;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.2);
        margin-left: auto;
        margin-right: auto;
        margin-top: 20%;
        left: 0;
        right: 0;
        text-align: center;
        border-radius: 7px;
        overflow: hidden;
        background: #7510f7;
        display: flex;
        flex-direction: column;


        .image-iframeContainer {
            display: flex;
            width: 100%;

//删除此高度值或将其设置为 100% 会破坏它/不起作用

            height: 50vh;
            background: #141c3a;
            overflow: hidden;

            img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
                background-repeat: no-repeat;
                margin: auto;
            }

            iframe {
                position: absolute;
                margin: 0;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 0;
            }
        }

这是我的沙盒，您可以看到： https://codesandbox.io/s/sleepy-sunset-jqjst?file=/src/styles.scss

Answer 1

那里有很多不必要的css代码

    .App {
  font-family: sans-serif;
  text-align: center;
}

.webAppStyles {
  height: 100vh;
  width: 100%;
  // remove thise 2, they dont do nothing in this case
  //  position: relative;
  //  overflow-x: hidden;

  // remove this class, it does absolutley nothing in this case
  // .Stack {
  //    width: 100%;
  //    height: 100%;
  // }

  .Cards {

    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 80%;
    margin: 10% auto 0;

    // duplicate property, remove this too
    // background: white;
    
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.2);
    
    // this is override at h1 and p, doesnt make any sense to add it here, remove it
    // text-align: center;

    border-radius: 7px;

    // this doesnt do anything here remove it
    // overflow: hidden;

    background: #7510f7;
    
    .image-iframeContainer {
      // you dont need flex againg, it's only an image in this container, nothing to flex here
      // display: flex;

      // any div has width 100% unless you told it to be smaller or bigger
      // width: 100%;
      
      background: #141c3a;
      
      // there is your problem, but right now can be safely removed, the problem was all that css code added for nothing
      // height: 100%;
      
      // doesnt do anything here
      // overflow: hidden;

      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        background-repeat: no-repeat;
        margin: auto;
      }

      iframe {
        position: absolute;
        margin: 0;
        top: 50px;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }
    }

    h1 {
        margin-top: 0;
        // remove this, default is left
        // text-align: left;
        width: 100%;
        margin-bottom: 2px;
        margin-left: 2px;
    }

    p {
        font-size: 0.8rem;
        // remove this, default is black
        // color: black;
        // remove this, default is left
        // text-align: left;
        margin-top: 0;
        margin-left: 2px;
    }

    .carousel-root{
      flex:1;
    }

    .carousel {
      z-index: 0;
    }

    .carousel, .slider-wrapper, .slider {
      height: 100%;
    }

    .slide {
      display: flex;
      justify-content: center;
    }
  }
}

Answer 2

how to stop images within a flexbox container ignoring the heigth set by parent?

此处回答的问题 flex-basis:0 需要在具有 flex-grow:1 的图像容器上使用

Answer 3

我不确定我是否理解你想要达到的目标，我无法在你的帖子下发表评论。但是根据给出的信息，我认为您希望图片填充文本上方的空间。我在您的沙盒中看到，图像的顶部和下方都有黑条，我想您希望图片填充这些。

所以我删除了你在图像周围的 div 周围的额外 div，并且我改变了你卡片的样式。我分叉了你的沙箱并在那里进行了调整，check it out!我希望这就是你所追求的......

HTML

<Carousel>
 <div className="image-iframeContainer">
  <img>

SCSS

.Cards {
    //position: absolute;
    width: 50%;
    //height: 80%;
    ...
}