Dynamically set CSS img max-height + max-width attribute to window size before page load?

I'm just realising after 24 hours of jquery/javascript pain, that maybe i'm going the wrong way on the problem. Trying to set the max-width and height of images to equal the size of the browser (if they are bigger than the browser) and on top of that, doing this to images that are loaded via an autopager/infinitescroll... and o开发者_运维问答n tumblr!... it's too much.

There has to be a way to set CSS values dynamically. But in the few years I've coded as a part time enthusiast, i've never sen anything like that, so i'm suspicious of my thinking.

So to summarise: As page loads, some script checks the window height and width and writes css for all imgs to have max widths and max heights of the browser. Possible?!

Use this:

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