Минимальный размер с соотношением сторон Копир.изобр

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

Есть две вещи, чтобы рассмотреть здесь:

1) Размер изображения ограничен WW и КН. Вы можете указать минимальную ширину и высоту для области изображения.

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

Answer 2

Вы можете сделать это, просто проверив, если высота окна меньше 400. Если это тогда, то это должно быть 400, используя следующий код.

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