Измените размер изображения разных размеров на основе размера окна браузера

Question

У меня есть три изображения разного размера, размещенные бок о бок на моем сайте и хотели бы, чтобы они изменяли размер на основе размера браузера с помощью jQuery.

$(window).bind('load resize', function() { 
    var windowheight = $(window).height(); 
    $('#pictures img').each(function() { 
     $(this).height(windowheight); 
    }); 
}); 

И в файле CSS У меня есть:

#pictures img { 
    width:auto; 
    max-height:100%; 
} 

Этот код будет правильным, если каждое изображение имело ту же высоту, но я не знаю, какое значение для перехода к высоте() функция, учитывая, что все три изображения имеют разную высоту.

Любые идеи?

Заранее спасибо

Answer 1

в вашем CSS

img {max-width:100%;max-height:100%;} 

тогда вы установили также ваш размер контейнера в%, так что на самом деле вам не нужно JavaScript для этого

NB1: «реальный «изменение размера для идеального рендеринга должно происходить на стороне сервера; но это было бы Kinna медленно на лету

NB2: есть теперь, современное решение для браузера на стороне клиента изменения размера (это сложнее, чем установка высоты ...)

Answer 2

вы можете получить экран высота и ширина (объясняется here и here), а затем вы можете использовать некоторую простую математику для изменения размера изображения. что-то вроде

picture_new_height = (actual_picture_height) * (window_height/screen_height)