Angular 2 – Adjust height of parent div based on the height of child div containing image

Im fetching a block of html from an external source using a http call.
The structure of the fetched html is the following:

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

The fetched html blocks contain several identical container divs with the same structure as above but the images can be of different size.
Im trying to display the container divs in the following way:

enter image description here

The image part of the picture above has got a width of 50% and the text 50%. I want to keep the aspect ratio and therefore the images has a fixed width but height set to auto. This will result in that the images will end up with different heights. I want the parent div (container) to adjust its height based on the height of the image contained inside it. I’ve tried several different ways to achieve this with pure css without any results. Is there a way to achieve the desired behavior with pure css or do i need another tool (like jquery?) to achieve it? Im presenting the html in my angular 2 application by the way.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

I believe you are trying to achieve this, although it is hard to determine. I am using inline-flex.. because i like it: 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> and the css .container { display : inline-flex; width : 300px } .container > * { width : 50%; border : 2px solid #000; } .image { border-left : none; } .image img { max-width : 100%; }