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:
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.