Javascript: эмуляция maxWidth и maxHeight для изображений в IE

Question

Мне нужно использовать maxWidth и maxHeight для изображений в скрипте, который должен работать с IE 7/8.Так как IE не поддерживает эти правила CSS, я написал следующую функцию:

function maxDimensions(element, maxWidth, maxHeight)
{
    element.style.width = 'auto';
    element.style.height = 'auto';
    element.style.width = maxWidth;
    var ht = element.innerHeight ? element.innerHeight : element.clientHeight;
    if (ht > maxHeight)
    {
        element.style.width = 'auto';
        element.style.height = maxHeight;
    }
}

Однако, похоже, что это происходит молча и просто не изменяет размеры некоторых изображений, в то время как другие прекрасно работают.Есть ли «принятый» способ сделать это в IE?И есть ли что-то явно не так с моим кодом?

Answer 1

Вы можете эмулировать maxWidth и maxHeight в IE6 с помощью выражений CSS - пример здесь http://www.cameronmoll.com/archives/000892.html. Убедитесь, что вы условно применяете эти правила для таргетинга только на IE6, и имейте в виду, что выражения CSS имеют некоторые серьезные проблемы с производительностью.

Answer 2

Я в конце концов нашел ошибку в коде, который я разместил:

element.style.width = maxWidth;

следует читать

element.style.width = maxWidth+"px";

(и аналогично для style.height). Таким образом, функция по данному вопросу должна выглядеть следующим образом:

function maxDimensions(element, maxWidth, maxHeight)
{
    element.style.width = 'auto';
    element.style.height = 'auto';
    element.style.width = maxWidth+"px";
    var ht = element.innerHeight ? element.innerHeight : element.clientHeight;
    if (ht > maxHeight)
    {
        element.style.width = 'auto';
        element.style.height = maxHeight+"px";
    }

}

Теперь это работает. Однако пока я оставляю вопрос открытым, если у кого-то есть более простое решение.

Answer 3

Используйте jQuery и плагин jQMinMax .

Редактировать: OP добавил, что это для букмарклета, поэтому в этом случае это не сработает.