Question

我发现了一个很好的jquery插件，可以按重量自动将图像缩放到容器上的浏览器屏幕上。但我需要按高度进行扩展。任何想法如何用jquery或css做到这一点？感谢。

示例（仅按重量计算）

jsfiddle.net/nottrobin/9Pbdz /

Answer 1

通过在图像元素本身上设置100％的宽度，浏览器将自动处理高度比例。不需要任何JS或明确的高度设置。

img {
    width: 100%;
}

您可以通过在父元素上设置显式高度，然后设置height：100％来实现相同的自动缩放“高度方式”。在嵌套的图像元素上。不要在图像上设置宽度以保持其比例。

div {
    height: 100px;
}
img {
    height: 100%
}

可以通过遵循相同的原理来实现动态图像高度。这是一个示例，它根据窗口高度为父元素提供动态高度。然后图像填充其父级的高度并适当缩放。

这应该让您接近完成的示例：

Answer 2

将包含div的尺寸专门设置为高度和重量，然后将图像的css类设置为高度：100％和宽度：100％