2

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

$('.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 的最小高度并在其上裁剪容器或类似的东西？

4

2 回答 2

3

您可以通过简单地检查窗口高度是否小于 400 来做到这一点。如果是，则使用以下代码将其强制为 400。

var wh = $(window).height() - 60;
wh = wh < 400 ? 400 : wh;
于 2013-02-24T19:39:24.570 回答
1

这里有两点需要考虑：

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);
    }
}
于 2013-02-24T19:45:21.047 回答