CSS - 按比例使图像尽可能高，不超过像素限制，尽可能宽而不超过父级的宽度

Question

我在包装器div 中有一个图像。我需要将图像的高度限制为不超过 150px。图像的宽度不能超过父div(包装器(的宽度。如果宽度或高度达到其限制，则其他尺寸不应再增加，以保持图像的原始比例。

我正在操作 id #frameImage 的图像的 CSS 和 id #imageWrapper 的包装器div 的 CSS：

#imageWrapper
{
    height: 150px;
    width: 100%;
}
#frameImage
{
    max-width: 100%;
    max-height: 150px;
}

从视觉上看，这似乎适用于至少有一个尺寸超过这些限制之一的图像。但是，我有一些图像的真实高度小于 150px，其真实宽度小于包装器div。在这种情况下，我想将图像放大到超出其自然尺寸的尺寸，直到其高度达到 150px 或其宽度达到包装器的宽度。

在当前状态下，我在上一段中描述的这些小图像保持其原始大小，并将自己塞入父div 的左上角，而不会扩展以满足这些限制之一。

我已经在auto和100%的高度和宽度上弄乱了几个小时，但没有得到我想要的结果。

有没有一种简单的方法可以实现我所缺少的？谢谢！

Answer 1

从 #frameImage 中的两个声明中删除 max 前缀，该前缀强制图像使用这些值