在响应式设计中使img与div高度相同

Question

请参阅所附图像以供参考。如何使图像右边的高度与左边两个框的高度相同。它需要有响应能力，现在它可以在特定的窗口大小下工作，但不能很好地适应较小的窗口大小。我认为可以通过使用background-image而不是img来实现，但是我正在使用worpress和the_post_thumbnail（）函数来获取返回img元素的图像。是否可以使用CSS修改img来达到这种效果？ 这是我的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

如果希望其具有响应性，则应使用％而不是使用固定的像素值。

尝试一下： <div class="event-image "><a href="[...]"><img height="100%" src="[...]"></a></div> 要么 <div class="event-image "><a href="[...]"><img width="100%" src="[...]"></a></div>

Answer 2

您可以做的事，阅读wordpress文档正在使用另一种获取图像的功能。

使用get_the_post_thumbnail_url() explaination here

您可以进行以下操作：

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