时间戳

首页 > 解决方案 > 如何使 div 与它旁边的 img 高度相同？

flexbox - 如何使 div 与它旁边的 img 高度相同？

问题描述

我需要帮助使 div 的高度与它旁边的 img 在同一 flex 行中的高度相同

这是html

`<div class="about">
     <img class="headshot" src="../img/headshot.jpg">
     <div class="textbox">here is where my text is</div>
 <div>`

我希望 .textbox 与 .headshot 的大小高度和宽度相同。到目前为止，我的宽度相同，但我无法让高度相同。

这是CSS：

`.about {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

.headshot {
    max-height: auto;
    max-width: 25%;
}

.textbox {
    background-color: hotpink;
    width: 25%;
    height: auto;
}`

我确信这是一些简单的解决方案，但我一直在努力解决它，所以非常感谢任何帮助！:)

标签： flexboxresizealignmentresponsivesizing

解决方案

尝试设置height:100%“文本框”类。

推荐阅读