максимальная ширина и максимальная высота для масштабирования изображений в Internet Explorer - PullRequest
15 голосов
/ 04 сентября 2010

Я нахожусь в процессе создания галереи, которая отображает несколько форматов изображений (широкий, квадратный и высокий) в фиксированном пространстве. Идеальным решением было бы, чтобы все изображения были одинакового размера, но это не может быть достигнуто.

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

Я искал различные варианты решения этой проблемы, но пока не смог заставить их работать (пока). Галерея использует jQuery и Galleriffic, которые отлично работают, за исключением проблемы max-width / max-height.

Есть предложения?

Редактировать: Кажется, что проблема заключается в том, как Internet Explorer обрабатывает изображения с max-height и max-width в том, что они неправильно масштабируются.

Редактировать 2: Я провел небольшое тестирование, и проблема с IE не в том, что работают max-width и max-height (поскольку они проверяют, что изображение не не становится больше, чем установлено), например:

max-width: 600px; max-height: 600px;

убедится, что изображение не станет больше этих двух значений. Изображения не масштабируются должным образом, поэтому высокие изображения будут выглядеть раздавленными, а широкие изображения будут выглядеть растянутыми. Я включил представление совместимости IE7, и изображения отображаются правильно, но в IE8 они выглядят раздавленными / растянутыми (что означает, что это будет проблемой в IE8) ..

1 Ответ

37 голосов
/ 17 ноября 2011

вы пробовали height: auto и width: auto, а также используете max-height и max-width, это обычно приводит к тому, что IE отображает правильное соотношение сторон.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...