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%;
}

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

1 个答案: