html - 在固定高度的情况下保留图像纵横比

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>

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

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

Answer 1

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

这可以满足您的要求：

img { 
    height: 18px;
}

在此处查看演示。

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