Angular 2 - Отрегулируйте высоту родительского div в зависимости от высоты дочернего div, содержащего изображение.

Question

Im выбирает блок html из внешнего источника, используя http-вызов. Структура извлеченной 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 блоки содержат несколько идентичных контейнеров дивы с той же структурой, что и выше, но изображения могут быть разного размера. Im пытается отобразить контейнер дивы следующим образом:

изображение часть изображения выше имеет ширину 50% и 50% текста. Я хочу сохранить соотношение сторон, и поэтому изображения имеют фиксированную ширину, а высота - автоматическую. Это приведет к тому, что изображения будут иметь разную высоту. Я хочу, чтобы родительский div (контейнер) настраивал его высоту в зависимости от высоты изображения, содержащегося внутри него. Я пробовал несколько разных способов добиться этого с помощью чистого CSS без каких-либо результатов. Есть ли способ достичь желаемого поведения с чистым css или мне нужен другой инструмент (например, jquery?) Для его достижения? Например, я представляю html в моем приложении с угловым 2.

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%; 
}