CSS对象适合图像扩展布局

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）并仍然使用百分比值。