Динамически установить CSS img max-height + max-width для размера окна до загрузки страницы?

Question

Я просто осознаю, что после 24 часов боли в jquery / javascript, возможно, я ошибаюсь в решении проблемы. Попытка установить максимальную ширину и высоту изображений равными размеру браузера (, если они больше, чем браузер ), и вдобавок ко всему, это делается для изображений, загружаемых через автопейджер Infinitescroll ... и на Tumblr! ... это слишком много.

Должен быть способ динамической установки значений CSS. Но за те несколько лет, что я писал как энтузиаст на полставки, я никогда не чувствовал ничего подобного, поэтому я с подозрением отношусь к своему мышлению.

Итак, подведем итог: При загрузке страницы некоторые скрипты проверяют высоту и ширину окна и записывают css для всех изображений, чтобы иметь максимальную ширину и максимальную высоту браузера. Возможно ли это?!

Answer 1

Используйте это:

$(function(){
    var $style = $('<style />').appendTo('head'),
        $window = $(window);

    $window.resize(function(){
        $style.html('img{max-width:' + $window.width() + 'px;max-height:' + $window.height() + 'px}');
    })
    .resize();
});