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

Question

我想在公司网站上建立一个图像网格，以列出他们的合作伙伴。由于所有这些合作伙伴的图标具有完全不同的比例，可能无法以任何方式进行修改，因此这是一个问题。格式范围约为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>