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

Question

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

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

Answer 1

你可能想打电话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 2

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

Answer 3

Try this, 

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