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

Question

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

高度必须相同 (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>

我想做的是将图像的高度保持在 18px，并使宽度适合纵横比。

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

Answer 1

What I would like to do is to keep the height of the image at 18px and have the width be whatever fits the aspect ratio.

这就是你想要的:

img { 
    height: 18px;
}

See demo here.

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