Делаем img той же высоты, что и div в адаптивном дизайне

Question

См. Прилагаемое изображение для справки. Как сделать так, чтобы изображение справа было той же высоты, что и два поля слева. Он должен быть отзывчивым, сейчас он работает с определенным размером окна, но плохо адаптируется к меньшим размерам окна. Я думал, что этого можно добиться, используя background-image вместо img, но я использую worpress и функцию the_post_thumbnail (), чтобы получить изображение, которое возвращает элемент img. Можно ли адаптировать img с помощью CSS, чтобы добиться этого эффекта? Это моя структура HTML:

<div class="event">
        <div class="event-top-half">
            <div class="event-date">
                <span class="PLD">22</span> 
                <span class="PLM">Jun</span>
            </div>
            <div class="event-image "><a href="[...]"><img width="719" height="267" src="[...]"></a></div>
        </div>
        <div class="event-name">
            <span><a href="https://1demo.dk/mva/event/eurotox-2020/">Mobilising our Entrepreneurs of tomorrow – session 4</a></span>
        </div>
    <div class="event-info">15:30 - 17:00 / online</div>
</div>

Answer 1

то, что вы можете сделать, читая wordpress do c, использует другую функцию для получения вашего изображения.

используя get_the_post_thumbnail_url() объяснение здесь

вы можете сделать что-то вроде этого:

<div class="event-image" style="background: url('<?php echo get_the_post_thumbnail_url(); ?>')"> </div>

, тогда все, что вам понадобится, это что-то вроде css (это просто предположение, это может принимать другие значения):

.event-top-half{
   display:flex;
   flex-direction:row;
   height: fit-content;
   width: 100%; /*or anything you need*/
 }
 .event-date{
   width: 30%;
   height: 200px;/*anything you need here*/
 }
 .event-image{
   background-position: center center!important;
   background-size: cover!important;
   background-repeat: no-repeat!important;
   width: 70%;
   height: 100%;
 }

Answer 2

Вместо использования фиксированных значений пикселей вы должны использовать%, если вы хотите, чтобы он был отзывчивым.

Попробуйте следующее: <div class="event-image "><a href="[...]"><img height="100%" src="[...]"></a></div> или <div class="event-image "><a href="[...]"><img width="100%" src="[...]"></a></div>