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

Question

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

我正在使用id #frameImage和id为#imageWrapper的包装器div的CSS来操作CSS：

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

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

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

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

在auto和100%高度和宽度的情况下，我一直在乱搞几个小时而没有得到我想要的结果。

有没有一种简单的方法可以实现这一目标，我错过了？谢谢！

Answer 1

从#frameImage中的两个声明中删除最大前缀，强制图像为这些值