将div设置为与图像相同的高度

Question

基本上这就是我得到的......

虽然这是我想要的.

我的图像高度和宽度设置如下...

#content img{
padding: 3%;
width: 60%;
height: 50%;
float: left;
}

使用%s,因为我希望它能够响应所有.所以px中图像的确切高度我无法分辨.

当我尝试为灰色框设置相同的尺寸时,它只会填满你所看到的内容.

#text{
padding: 3%;
margin-right: 3%;
margin-top: 3%;
width: 37%;
height: 50%;
float: left;
background-color: #333333;
color: #FFFFFF;
}

无论如何如何去做？我也开始认为问题可能是我试图让它不正确地响应.

提前致谢.

编辑:这是HTML

<div id="content">
    <img src="projectphotos/1.jpg">
    <span class="arrows" style="float: right;"><i class="fa fa-angle-`double-right fa-3x"></i></span>`
    <div id="text">
        Test
    </div>
</div>

Answer 1

您可以使用 Flexbox

body, html {margin: 0; padding: 0}
.content {
  display: flex;
}
.text {
  background: #333333;
  color: white;
  flex: 1;
  margin: 10px;
}
.image {
  flex: 2;
  margin: 10px;
}
img {
  width: 100%;
  vertical-align: top;
}

<div class="content">
  <div class="image">
    <img src="http://placehold.it/900x450">
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, id.</div>
</div>

Answer 2

只需添加display: flex到#content并删除float: left从两个。