Как я могу установить максимальную ширину для изображений на странице кросс-браузерным способом?

Question

Как я могу установить максимальную ширину изображений на странице кросс-браузерным способом, используя CSS или Javascript?

Answer 1

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

Работает для всех современных браузеров. Не работает на IE6. Если вам нужна поддержка IE6, вам придется использовать JS, например:

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

Answer 2

В Css используют

img {ширина: 400px;}

Но используйте свой собственный размер.