Question

How can I set the max width for images in a page in a cross-browser way using CSS or Javascript?

Answer 1

img.limitsize { max-width: 640px; }

Works for all modern browsers. Doesn’t work on IE6. If you need IE6 support you’d have to use JS, eg.:

// IE-6-only function to implement max-width
// (you can do min- and height similarly)
//
function MaxWidthFix(element) {
    var width= element.currentStyle['max-width'];

    function update() {
        element.style.width= width;
        var wmax= element.offsetWidth;
        element.style.width= 'auto';
        var wauto= element.offsetWidth;
        if (wauto>wmax)
            element.style.width= width;
    }

    // If width or max-width is set in % or em, window and font resizes
    // might change sizes, requiring an update
    //
    window.attachEvent('onresize', update);
    setTimeout(update, 1000);
    update();
}

if (!('maxWidth' in document.body.style)) {
    var imgs= document.getElementsByTagName('img');
    for (var i= imgs.length; i-->0;)
        if (imgs[i].className.indexOf('limitsize')!==-1)
           MaxWidthFix(imgs[i]);
}