0

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

我正在处理 ID 为 #frameImage 的图像的 CSS 以及 ID 为 #imageWrapper 的包装器 div 的 CSS：

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

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

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

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

我已经搞砸了几个小时的auto高度100%和宽度，却没有得到我想要的结果。

有没有一种我想念的简单方法来实现这一点？谢谢！

4

1 回答 1

0

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

于 2013-09-26T01:03:00.780 回答