javascript - 最小尺寸与纵横比调整图像大小

Question

我正在使用以下代码对图像执行调整大小功能:

$('.image_resize').each(function(){
    var ww = $(window).width() - 80 - 400;
    var wh = $(window).height() - 60;
    var iar = $(this).attr('height') / $(this).attr('width');
    var war = wh / ww;
    if(iar <= war){
        $(this).attr("width" , ww);
        $(this).attr("height" , ww * iar);
    }else{
        $(this).attr("height" , wh);
        $(this).attr("width" , wh / iar);
    }
})

此标记:

<div id="home_image">
    <img class="image_resize" src="img/home_image.jpg" alt="home_image" width="945" height="557">
</div>

代码工作得很好，并以正确的宽高比调整图像大小，但问题是，调整大小没有最小限制，因此图像可以变得小至 20 像素 * 比率，我想限制这一点。

如何将图像限制为最小高度 400px 并在其上裁剪容器，或类似的东西？

Answer 1

您可以通过简单地检查窗口高度是否小于 400 来完成此操作。如果是，则使用以下代码强制其为 400。

var wh = $(window).height() - 60;
wh = wh < 400 ? 400 : wh;