Html 如何将我的div height scale设置为相邻的div height？

首先，让我说我对HTML和CSS非常陌生。到目前为止，我有一个包含div的div，里面有两个div，一个向左浮动，一个向右浮动。右边浮动的那个包含一个400px的图像，左边浮动的那个应该包含一些文本，但我希望背景色的高度保持与图像相同的高度。因为图像是由百分比而不是像素高度定义的，所以我不能将高度设置为相同，因为它不会缩放

以下是HTML：

<div id="about">
    <div id="abouttext">
        djfd
    </div>      
    <div id="aboutpic">
        <img src="images/photoph.png" alt="Yeah, that's me">
    </div>
</div>

---

非常感谢您的帮助。

这里的一般原则是将包装器定义为display:table，将包含的元素定义为display:table cell。见下文：

img{ 宽度：100%； } 关于{ 宽度：100%； 高度：自动； 保证金：0自动； 显示：表格； } 关于太平洋{ 背景颜色：蓝色； 宽度：45%； 显示：表格单元格； } 大约{ 颜色：白色； 宽度：45%； 背景色：2A1F33； 显示：表格单元格；； } djfd

---

你是说像这样的事吗

---

400px图像和图像是由百分比定义的哪个是真的？文件是400px，但它显示为包含div的40%。可能是复制品？！您希望图像的高度和宽度是多少？

#about
{
    width: 70%;
    height: auto;
    margin: 0 auto;
}

#aboutpic
{
    width: 40%;
    float: right;
}

#abouttext
{
    width: 50%;
    background-color: #2A1F33;
    opacity: 0.6;
    height: auto;
    float: left;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}

#about
{
    width: 70%;
    height: auto;
    margin: 0 auto;
    display: flex;
}

#aboutpic
{
    width: 40%;
    float: right;
}

#abouttext
{
    width: 50%;
    background-color: #2A1F33;
    opacity: 0.6;
    float: left;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}

img {
    height: 400px;
    width: 100%;
    display: block;
}