Html CSS对象匹配图像扩展布局

我在父div中放置了一些子div。看起来是这样的：

现在我需要在红色（棕色）分区中放置一个相对大小的图像。 但每次我将图像放入div时，布局都会扩展。 这对我来说是个问题

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

HTML:

---

默认情况下，图像具有

position:static

，它被“插入”到父元素中，并在那里“占用一些空间”，导致父元素变大。您可以为它指定

位置：绝对值

（这要求父元素具有

位置：相对值

），并且仍然使用百分比值

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

.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;
}