Как центрировать и автоматически масштабировать изображение?

Question

Вероятно, две из наиболее распространенных проблем с макетированием CSS:

1. Центрирование по горизонтали и вертикали.
2. Автоматическое масштабирование изображений до размера области просмотра (с сохранением соотношения сторон и без переполнения по вертикали или горизонтали).

Индивидуально, есть хорошие решения для обоих:

1. Используйте display: table на внешнем элементе контейнера и display: table-cell, vertical-align: middle и text-align: center на внутреннем.
2. Используйте max-height: 100% и max-width: 100% для элемента img.

Но объединение обоих делает только центрирование , даже при использовании height: 100% и width: 100% на всех элементах, окружающих img.

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

Answer 1

Я не уверен на 100% в этом, но когда вы говорите 100% чего-либо, размеры родителя должны быть фиксированными или должны привести к фиксированному размеру. Попробуйте указать ширину: SOMEINTpx; высота: SOMEINTpx; в наружном контейнере.

Answer 2

Вы можете установить изображение как фон и попробовать это:

background-position: center center;
background-size: cover; /*or contain*/

Answer 3

img {
    height: 100%;
    width: 100%;
}​

Fiddle

В основном изображение должно занимать 100% высоты и ширины от размера его контейнера. Если вы установите другой размер для контейнера, он будет меньше. В скрипке вы можете легко увидеть, как она масштабируется до ширины, но, поскольку высота скрипки немного больше фиксированной, сказать сложнее.