Html 根据屏幕宽度按比例调整图像大小，并在4列中对齐

我想在公司网站上建立一个图像网格，列出他们的合作伙伴。由于所有这些合作伙伴都有完全不同比例的图标，不能以任何方式进行修改，这是一个问题。格式范围约为1:2至5:1

我想要的是将它们放置到一个具有3列的网格中，该网格根据浏览器宽度自动调整其宽度。其中的图像应具有最大宽度（列宽减去一点边距）和与当前最大宽度成比例的最大高度（例如格式2:1）

在最大高度和宽度的限制范围内，图像应尽可能按比例缩放

如何做到这一点，最好只使用HTML和CSS

从当前wordpress生成的代码中提取：

<div class="cr3_sponsorwrapper">
   <div class="fours-column">
      <a href="#" target="_blank">
         <div class="cr3_sponsor_image">
            <img width="679" height="508" src="#" class="attachment-full size-full wp-post-image" alt="1" />
         </div>
      </a>
      <p></p>
   </div>
   <div class="fours-column">
      <a href="#" target="_blank">
         <div class="cr3_sponsor_image">
            <img width="1000" height="634" src="#" class="attachment-full size-full wp-post-image" alt="2" />
         </div>
      </a>
      <p></p>
   </div>
   <!-- and so on... -->
</div>

到目前为止您做了什么？目前，我将

包装在

s中，宽度为

22%

和

边距为：1%

，并使用

浮动：左

进行布局。但这会导致不良行为，即当多个小图标位于大图标的右侧时，它们可能会堆叠在彼此下方。我们如何在不查看代码的情况下提供答案？请提供一个MCVE！添加了该页面的摘录。它是由wordpress生成的。