指定图像宽度和高度的最佳方法是什么？

Question

为什么我的右边方块不是100%高度？
我大致可以理解为什么。

因为内容并没有占据 100% 的高度，但是为什么会发生这种情况呢？我希望 Hero-image-container 占据父级的整个高度和宽度（50% 可用）。但是当设置百分比时，这种情况不会发生

我的容器

<div class="container hero-container">
    <div class="hero-text-container">
        <h3 class="hero-text-top top-title">Restaurant</h3>
        ...etc
    </div>

    <div class="hero-image-container">

        <div class="test-container-test">
            <image class="hero-image-main" src="assets/bg.png"></image>
        </div>

    </div>
</div>

有了这个CSS

hero-container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 4rem;
    min-height: 600px;
}

.hero-text-container{
    position: relative;
    width: 100%;
    height: 100%;
}

.title{
    color: #232323;
    font-size: 96px;
    font-weight: 800;
}

.hero-image-container{
    position: relative;
    display: flex;
    max-width: 50%;
    height: 100%;
    background-color: #000000;
}


.test-container-test{
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
 }

.hero-image-main{
    max-width: 100%;
    max-height: 100%;
}

我知道如果我有意设置高度，事情就会成功，但我想避免这种情况。 我想了解如何最好地插入图片，它们是否应该标明确切的尺寸？或者使用此类块的最佳方法是什么？

Answer 1

按如下所示更新类的 CSS - Hero-container、hero-image-container、hero-image-main。并删除带有 class -

test-container-test

的 div（如果它不用于包含任何其他元素）。

.hero-container{
    position: relative;
    display: flex;
    justify-content: stretch;
    padding-block: 4rem;
    min-height: 600px;
    border: 2px solid black;
}



.hero-image-container{
    background-color: #000000;
    display: flex;
}

.hero-image-main{
    max-width: 100%;
    max-height: 100%;
     object-fit: fill;
}