Question

我在桌子上有一张图片。特别是可能非常高的剖析信息图（一个垂直像素是来自一个源的数据，一个水平像素是一个时间单位）。我想指定图像的最大高度并垂直重新缩放，使其不能在页面下方延伸太远。但我想保留宽度（页面可以水平缩放）。即我特别想要改变源图像的宽高比。

我的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来限制图像的垂直尺寸，必要时调整大小，但保留宽度？

Answer 1

您可以使用min-width

强制宽度

＆＃13;

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

＆＃13;

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

＆＃13;