保持高度固定的图像纵横比

Posted 2023-03-06

【中文标题】保持高度固定的图像纵横比

【英文标题】：Preserve image aspect ratio with the height fixed

【发布时间】：2013-07-07 20:34:11

【问题描述】：

我正在处理表格中的一些图标，并希望保持图标的纵横比。

高度都必须相同（18px），但宽度可以变化。

当宽度固定且高度设置为自动时，我已经看到了其他解决方案，如下图this solution

img 
  width:  75px;
  height: auto;

下面是我的表格的一些示例代码（表格中至少只有一个单元格）

<td class="set_symbol" style="text-align: center;">
  <img src="/static/img/symbols_large/Gatecrash_Uncommon.gif" style="height: 18px;">
</td>

我想要做的是将图像的高度保持在 18 像素，并让宽度符合纵横比。

另外，我对浏览器没有疑虑。所以如果它需要 CSS3 或其他什么，没关系。

【问题讨论】：

问题是什么？

你可以试试<img src="/static/img/symbols_large/Gatecrash_Uncommon.gif" style="max-height: 18px;width: 100%;>。虽然我不确定这是否是你想要做的。

@acdcjunior 谢谢，在我的热情中我忘记了。

@stackErr 我实际上尝试过，因为原始图像的宽度为 200 像素到 300 像素，因此看起来非常宽。我想保持纵横比，同时保持高度为 18px。

通常应该是height: 18px; width: auto;。

【参考方案1】：

我想要做的是将图像的高度保持在 18 像素，并让宽度符合纵横比。

这就是你想要的：

img  
    height: 18px;

See demo here.

请记住，如果您想保持较小的图像较小，可以使用 max-heigth 代替 height。