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>

代码效果很好并且使用正确的宽高比调整图像大小，但问题是调整大小没有minium限制，因此图像可以变得小到20像素*比例，我想要限制。

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

Answer 1

您只需检查窗口高度是否小于400即可。如果是，请使用以下代码将其强制为400.

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

Answer 2

这里有两件事需要考虑：

1）图像的大小受到ww和wh的限制。您可能希望为图像区域指定最小宽度和高度。

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

2）图像的大小也受其纵横比的影响。因此，假设您有一个全景图像 - 上面的代码将确保最小宽度为50像素，但由于其纵横比，它的高度可能只有15像素。如果要在这些情况下强制执行最小高度，则必须使用条件块更改代码。请注意，这也会将实际宽度更改为比ww更宽的宽度。

if(iar <= war){
    if (ww*iar<50) { 
        $(this).attr("width" , 50 / iar);
        $(this).attr("height" , 50);
    } else {
        $(this).attr("width" , ww);
        $(this).attr("height" , ww * iar);
    }
}else{
    if (wh*iar<50) {
        $(this).attr("height" , 50 * iar);
        $(this).attr("width" , 50);
    } else {
        $(this).attr("height" , wh);
        $(this).attr("width" , wh / iar);
    }
}

最小尺寸，纵横比调整图像大小

2 个答案: