jquery - Image auto fit container by height and weight

Question

I found good jquery plugin that auto scale image to the browser screen on the container by weight. But I need to scale also by height. Any ideas how to do that with jquery or css? thanks.

example (scale only by weight)

jsfiddle.net/nottrobin/9Pbdz/

Answer 1

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

img {
    width: 100%;
}

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

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

http://jsfiddle.net/9Pbdz/84/

---

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

http://jsfiddle.net/9Pbdz/85/

---

这应该让您接近一个完整的示例：

http://jsfiddle.net/9Pbdz/92/

Answer 2

将包含 div 的尺寸专门设置为高度和重量，然后将图像的 css 类设置为 height:100% 和 width:100%