保持图像纵横比，同时固定高度

Question

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

所有图标的高度必须相同（18px），但宽度可以不同。

我看到了其他解决方案，当宽度固定而高度设置为自动时，就像下面这个解决方案。

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等技术实现。

- Milo Gertjejansen

---

什么是问题？ - acdcjunior

你可以尝试使用 <img src="/static/img/symbols_large/Gatecrash_Uncommon.gif" style="max-height: 18px;width: 100%;>，但我不确定这是否符合你的要求。 - stackErr

@acdcjunior 谢谢，我太激动了，忘记了它。 - Milo Gertjejansen

@stackErr 我实际上尝试过这个方法，但由于原始图像的宽度为200px到300px，这会使它们看起来非常宽。我想保留纵横比，同时将高度保持在18px。 - Milo Gertjejansen

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

Answer 1

我希望做的是保持图像的高度为18px，而宽度则适应其长宽比例。以下代码可以实现此功能：

img { 
    height: 18px;
}

在此处查看演示。

记住，如果您想保持小图像的大小，可以使用max-height而不是height。

- acdcjunior