如何在不超出max-height且保持宽高比的情况下最大化图片宽度？

这事儿其实很好解决，咱们用几行CSS就能实现你要的效果——让图片在不超过指定最大高度的前提下，尽可能撑满容器宽度，还能完美保持原有的宽高比。

核心实现思路 #

关键就是这几行CSS规则，每个属性都各司其职：

• display: block：消除图片默认的行内元素间距，避免底部出现莫名的空隙
• max-height: 100px：设定图片的最高高度上限，超过这个高度就会被等比例压缩
• max-width: 100%：确保图片不会超出父容器的宽度范围，防止横向溢出
• width: auto：让图片宽度根据高度自动计算，严格维持原有的宽高比

完整代码示例 #

先看CSS部分：

img {
  display: block;
  max-height: 100px;
  max-width: 100%;
  width: auto;
}

再结合固定布局的表格来演示不同容器宽度下的效果（表格总宽度500px，两个单元格分别为100px和400px宽）：

<table border="1" style="table-layout: fixed; width: 500px;">
  <thead>
    <th style="width: 100px;">100px</th>
    <th style="width: 400px;">400px</th>
  </thead>
  <tbody>
    <tr>
      <td>A image</td>
      <td><img src="http://via.placeholder.com/800x200" alt="示例图片"></td>
    </tr>
  </tbody>
</table>

举个例子，假设图片原本是800x200的尺寸：

• 在100px宽的单元格里，max-width: 100%会限制图片宽度最多到100px，高度自动等比例缩到25px，完全适配单元格宽度
• 在400px宽的单元格里，图片会先触发max-height: 100px的限制，高度缩到100px，宽度自动变成400px，刚好填满单元格，同时保持原有的4:1宽高比

内容的提问来源于stack exchange，提问作者iury simoes-sousa