jQuery：根据浏览器大小调整图像大小

Question

我正在尝试使用JQuery根据浏览器的大小/大小调整图像大小。

我希望图像按比例缩放并保持其比例，而不会被截断。

我正在使用Bootstrap，我的HTML如下所示：

<div class="container-fluid">
      <div class="row">
        <div class="col-sm">
          <div class="text-block">
            <h1>Hellow World</h1>
            <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h6>
          </div>
        </div>
        <div class="col-sm img-container">
          <img src="image.png" />
        </div>
        <div class="col-sm">
          <div class="text-block">
          <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h6>
          </div>
        </div>
      </div>
    </div>

该图像位于.img-container div中，而我的JQuery如下所示：

$(document).ready(function() {
   $(window).resize(function() {
     var img = $("img");
     var image = $(".img-container").find(img);
     var browserRatio =  $(this).width() / $(this).height();
     var imageRatio = image.width() / image.height();

     if(browserRatio > imageRatio) {
       $(".img-container").find(img).css({ "width": "100%", "height": "auto"});
     }
     else if(imageRatio > browserRatio) {
       $(".img-container").find(img).css({ "width": "auto", "height": "100%"});
     }

     console.log("Browser ratio is :" + browserRatio);
     console.log("Image ratio is:" + imageRatio);
   });
});

如您所见，我正在调整浏览器的高度/宽度比例，然后检查图像的比例是大于还是小于浏览器的比例，然后尝试使用css对其进行调整。

这是行不通的，并且图像的宽度不能保持其比例。 我的代码有什么问题？

Answer 1

最近，我已经通过简单地使用CSS https://jsfiddle.net/nazimboudeffa/j6kwtgxa/回答了相同的问题

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}