自动更改原始比例的图像大小，同时更改图像父元素的大小

Question

div标签有图像。我必须改变div的宽度和高度。如果我改变标签的宽度和高度，那么图像的宽度和高度将自动改变图像的原始比例。但是，图像使用jQuery或Javascript，大小不应超过原始大小。

<div>
    <img src="logo.jpg"/>
</div>

Answer 1

使用max-width和max-height css属性。

Answer 2

您可能希望在window.load上调用此函数：

$('img:visible').each(function() {
    // For visible images only
    var imageWidth,
        imageHeight,
        aspectRatio;

    var parentWidth = $(this).parent().width(),
        parentHeight = $(this).parent().height();

    if (this.naturalWidth > parentWidth || this.naturalHeight > parentHeight) {
        aspectRatio = this.naturalWidth / this.naturalHeight; // Actual image width and height

        if (this.naturalWidth > this.naturalHeight) {
            imageWidth = parentWidth - 50; // Leave margin
            imageHeight = imageWidth / aspectRatio;
        } else {
            imageHeight = parentHeight - 10; // Leave some space
            imageWidth = imageHeight * aspectRatio;
        }

        $(this).css({
            'width': imageWidth,
            'height': imageHeight
        });
    }
});

演示：https://jsfiddle.net/tusharj/onytgawp/

Answer 3

Try this,

img{
    max-width:100%;
    max-height:100%;
}