jquery - Angular 2 - 根据包含图像的子 div 的高度调整父 div 的高度

Question

我正在使用 http 调用从外部源获取 html block 。获取的 html 的结构如下:

<div class="container">
   <div class="wrapper">
      <div class="image">
        <img src="img_url>
     </div>
   <div class="text_wrapper>
   <div class="text>
           text...
   </div>
</div>

获取的 html block 包含几个相同的容器 div，它们的结构与上面相同，但图像可以有不同的大小。我试图以下列方式显示容器 div:

上图的图像部分的宽度为 50%，文本为 50%。我想保持纵横比，因此图像具有固定宽度但高度设置为自动。这将导致图像最终具有不同的高度。我希望父 div(容器)根据其中包含的图像的高度调整其高度。我已经尝试了几种不同的方法来使用纯 css 来实现这一点，但没有任何结果。有没有办法用纯 css 实现所需的行为，或者我需要另一个工具(如 jquery？)来实现它？顺便说一下，我在我的 Angular 2 应用程序中展示了 html。

Answer 1

我相信您正在努力实现这一目标，尽管这很难确定。我正在使用 inline-flex.. 因为我喜欢它:

jsFiddle

html

<div class="container">
   <div class="text_wrapper">
        text...
   </div>
   <div class="image">
        <img src="http://www.asfinfrastructure.com/images/project-asf-logo.jpg">
   </div>
</div>


<div class="container">
   <div class="text_wrapper">
        text...
   </div>
   <div class="image">
        <img src="https://pbs.twimg.com/profile_images/1260584600/ASF_Nederlands_LOGO.jpg">
   </div>
</div>

和css

.container {
  display : inline-flex;
  width : 300px
}

.container > * {
  width : 50%;
  border : 2px solid #000;
}

.image {
  border-left : none;
}

.image img {
  max-width : 100%;
}