Как центрировать и подогнать размеры изображения?

Question

[More916]

Так как изображение помещается в модальное окно, то можно считать, что у нас чистая страница. Итак на странице расположен элемент div внутрь которого помещается изображение. Изображение может быть как 2000x500 так и 500x2000. Оно должно быть сжато до 90% от размера страницы по большей стороне. Если же оно ни по одной стороне не превышает 90% размера страницы (например 150х100, а страница стандартного размера), то тогда просто центрируем его.
<div><img></div>

Answer 1

[Тимофей Белоусов]

Вот, как вариант.

Comments

[More916]

Да, так помогло.
Добавил только для transform дубликаты с приставками -moz-, -ms-, -webkit- и -o- в надежде на повышение "кросс-браузерности".

Answer 2

[Алексей]

Попробуйте так

img {
     display: block;
     max-width: 90%;
     max-height: 90%;
     margin: 0 auto;
}

div {
     display: table-cell;
     vertical-align: middle;
}

Comments

[More916]

Изображение на центрируется по вертикали. А так же размер 90% срабатывает только по ширине, но не работает по высоте

[Алексей]

В таком случае лучше разбирать конкретный пример. Создайте пример на jsfiddle и дайте ссылку.

Answer 3

[Сергей Иванов]

Как написал уже Алексей выше. Но если для старых браузеров (IE 7, IE6), то можно в таблицу с одним рядом и колонкой и применить vertical-align: middle;

display
table