html - CSS object fit image 展开布局

Question

我在父 div 中放置了一些子 div。它看起来像这样:

现在我需要将具有相对大小的图像放入红色(棕色)div 中。但每次当我将图像放入 div 时，布局都会扩展。这对我来说是个问题。

那么如何在不扩展 div 布局的情况下将具有相对大小的图像放入我的 div 中？

HTML:

 <div class="textContentContainer">

                <div class="FirstSectionContentHeader">
                   <table class="layoutTable"><tr><td class="centerDiv">
                        <div class="FirstSectionHeaderintroText uppercase">
                            SOME TEXT
                        </div>
                    </td></tr></table>
                </div>

                <div class="FirstSectionLogoArea">
                <img src="../img/Headerlogo.png" alt="Description" class="FirstSectionTitleLogo">
                </div>

                <div class="FirstSectionIntroText usualText">
                  ddd
                </div>

                <div class="FirstSectionBottomLayout">
                    <img src="../img/basics/Pfeil.png" alt="Pfeil" class="FirstSectionBottomArrow">
                </div>


            </div>

CSS

.FirstSectionContentHeader{
    height:10%;
    width: 100%;
    font-weight:200;
    text-align:center;
    background-color: aqua;
}

.FirstSectionLogoArea{
    height:10%;
    width:100%;
    background-color: chartreuse;
}

.FirstSectionTitleLogo{
    height:80%;
    width:100%;
    object-fit:contain;
}

.FirstSectionIntroText {
    height:70%;
    width:100%;
    background-color:white;
}

.FirstSectionBottomLayout{
    height:10%;
    width:100%;
    background-color: brown;
}

.FirstSectionBottomArrow {
    height:10%;
    width:10%;
    object-fit:scale-down;
}

Answer 1

图片默认有position: static，它“插入”在父元素中，在那里“占用一些空间”，导致父元素变大。您可以给它 position: absolute(这要求父元素具有 position: relative)并且仍然使用百分比值。