将最大高度应用于图像，同时保留宽度答案

【问题标题】：Apply max-height to an image while preserving width将最大高度应用于图像，同时保留宽度
【发布时间】：2015-09-23 02:18:27
【问题描述】：

我在表格中有一张图片。特别是一个可能非常高的分析信息图（一个垂直像素是来自一个来源的数据，一个水平像素是一个时间单位）。我想为图像指定一个最大高度并垂直重新缩放它，这样它就不会在页面下方延伸太远。但我想保留宽度（页面可以水平缩放）。即我特别想更改源图像的纵横比。

我的 html 看起来，有点像这样，而且大部分都可以工作。

<style>
img.capped {
  max-height : 500px;
  width : 100%;
}
</style>
...
<tr><th>Profile</th></tr>
<tr><td><img src=... class=capped></td></tr>

但是，如果图像的宽度小于字符串“Profile”的宽度，我的图像会水平和垂直向上缩放。

有没有办法使用 CSS 来限制图像的垂直大小，必要时调整大小，但不考虑宽度？

【问题讨论】：

也许你可以分享更多的代码或一个活生生的例子。 max-height 将在小规模示例中执行您所要求的操作：jsfiddle.net/ryanpcmcquen/1adv3yga
使用也可以使用你的图片作为CSS背景+规则background-size: contain;。好处是无论容器尺寸如何，它都会适应。
我认为您需要 JavaScript。您需要指定图像的最大宽度为原始宽度，而您不能在 CSS 中这样做。
移除宽度：100%；将保持纵横比。
@BG101：他不想保持纵横比。 “即我特别想改变纵横比”

【解决方案1】：

您可以使用min-width强制宽度

img {
  max-height: 100px;
  min-width: 100%;
}

&lt;img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150" /&gt;

【讨论】：