Angular 2 - 根据包含图像

Question

我使用http调用从外部源获取一个html块。 获取的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块包含几个相同的容器div，其结构与上面相同，但图像可以具有不同的大小。 我试图以下列方式显示容器div：

上图中的图像部分宽度为50％，文本为50％。我想保持纵横比，因此图像具有固定宽度但高度设置为自动。这将导致图像以不同的高度结束。我希望父div（容器）根据其中包含的图像的高度调整其高度。我已经尝试了几种不同的方法来实现这个纯css而没有任何结果。有没有办法用纯css实现所需的行为，还是需要另一个工具（如jquery？）来实现它？我顺便提一下我的角度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%;
}