Текущее изображение внутри изменяемого размера DIV

Question

Я пытаюсь подогнать изображение внутри изменяемого размера DIV, Изображение должно сохранять свои пропорции и никогда не превышать 100% (ширину и высоту) - даже если содержащее DIV больше, чем изображение.

Изображение также должно быть отцентрировано по горизонтали и вертикали. Chrome и Safari делают это отлично, а Internet Explorer 10 - нет.

Я настроил быстрый jsfiddle, чтобы проиллюстрировать проблему.

HTML:

<div id="diver">
    <img src="http://ie.microsoft.com/testdrive/Performance/Minesweeper/images/ie-logo.png" style="" />
</div>

И CSS

#diver {
    border:1px solid #000000;
    width:200px;
    height:200px;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
}

img {
    max-width:100%;
    max-height:100%;
}

Попробуйте изменить размер рамки до 100% ширины и высоты в Chrome, и вы получите нечто похожее на эти изображения:

Высота менее 100%:

Ширина менее 100%:

Internet Explorer 10, однако, только масштабирует высоту. Ширина не опустится ниже 100%, что является главной проблемой.

Я могу заставить IE масштабировать ширину, как в Chrome/Safari, но это требует DIV Высота (да, высота) должна быть установлена ​​на что-то низкое, например, на 10 пикселей, что немного странно.

Я знаю, что возможно динамическое масштабирование изображения в javascript, но я не вижу необходимости в дополнительном javascript, когда Internet Explorer должен уметь правильно обрабатывать масштабирование.

Answer 1

Ячейки таблицы и размерные ограничения

Проблема возникает в IE, Firefox и Opera. Это вызвано использованием display: table-cell в комбинации с max-width: 100% а также max-height: 100%, Ячейки таблицы ведут себя иначе, чем элемент с display: block,

Это не имеет ничего общего с изменяемым размером контейнера. Это также не имеет ничего общего с выравниванием контента (хотя это, вероятно, мотивация для использования display: table-cell). Оба могут быть удалены из уравнения на данный момент в интересах сведения кода к простейшему состоянию, в котором основная проблема все еще может быть воспроизведена.

Упрощенная демоверсия

В упрощенном демо есть пара изображений и пара span теги с синим фоном. В каждой паре первая использует display: block а второй использует display: table-cell, Остальная часть CSS идентична.

Для каждого, если CSS успешен, ширина и высота изображения или span будет уменьшен до 100px. Если нет, ширина или высота останется на уровне 200 пикселей.

Изображений

• Когда используешь display: block, он прекрасно работает во всех браузерах.
• Когда используешь display: table-cell, Chrome и Safari (браузеры Webkit) работают нормально, в то время как IE, Firefox и Opera не могут уменьшить ширину изображения.

теги span

• Когда используешь display: block, он прекрасно работает во всех браузерах.
• Когда используешь display: table-cellChrome и Safari не могут уменьшить ширину и высоту, в то время как IE, Firefox и Opera не могут уменьшить ширину.

Для изображений поведение соответствует результатам тестирования оригинальной демоверсии, добавленной к вопросу.

Вот обновленная версия оригинальной демоверсии, заменив изображение на промежуток с синим фоном, который может немного более наглядно продемонстрировать, как существует основная проблема в Chrome и Safari. Если демо изменено на использование display: blockРазмер контента работает нормально во всех браузерах (хотя выравнивание потеряно).

JQuery

Если не будет найден способ правильного размера изображения в ячейке таблицы, в таком упрощенном случае, как этот, решение этой проблемы для оригинальной демонстрации, вероятно, потребует добавления некоторого дополнительного jQuery или эксперимента с более продвинутой функцией CSS3, такой как flexbox или сетки.,

Если требуется дополнительный jQuery, его можно использовать для выравнивания изображения (чтобы display: block может использоваться для контейнера), или это может быть использовано для изменения размера изображения (исключая использование max-width: 100% а также max-height: 100%, чтобы display: table-cell может быть использован для выравнивания).

В любом случае jQuery UI Resizable имеет событие resize, которое можно использовать для этого.

Answer 2

Если вы сделаете ниже, это сделает максимальную ширину работы в Internet Explorer 10.

#diver {
    border:1px solid #000000;
    width:200px;
    height:200px;
    text-align:center;
    /*display: table-cell;*/
    vertical-align: middle;    
}

Я предполагаю, что это решает половину проблемы, поскольку вертикальное выравнивание изображения потеряно. Щедрость побудит меня заняться этим вопросом дальше;)