我正在尝试使用JQuery根据浏览器的大小/大小调整图像的大小。
我希望图像的规模和保持它的比例,而不是被切断。
我使用的是引导程序,我的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);
});
});
这不起作用,图像的宽度也不能保持它的比例。我的代码怎么了?
