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

Question

[Владимир Кудинов]

Дано:
блок div с размерами 150х150 и overflow: hidden;
картинка с произвольными размерами, но обе стороны заведомо больше 150 пикселей.

Необходимо:
С помощью великого и могучего CSS сделать так, чтобы в блоке был виден максимально возможный центральный участок изображения.

Буду весьма признателен, если кто-то подскажет, как сделать.

Comments

[Владимир Кудинов]

UPD: ставить картинку фоном не приемлимо, т.к. заранее размеры изображения не известны, а видеть из всего портрета только правую ноздрю не камильфо. Про масштабирование фона знаю, но хочется чего-то кроссбраузернее.

Answer 1

[lastwish]

С одним лишним div-ом — легко, делаем его достаточно широким во все стороны и центрируем уже в нём.

http://jsfiddle.net/37h2M/

Comments

[lastwish]

упс, плохо вопрос прочитал

[Владимир Кудинов]

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

[lastwish]

@qdinov нет, там нужно просто достаточно большое число (в данном случае 2000), в которое гарантированно влезет картинка. можно хоть 10000 поставить. если все картинки будут, к примеру, горизонтальными, то можно обойтись max-height: 150px: http://jsfiddle.net/37h2M/3/ иначе придётся скриптом определять, горизонтальная она или вертикальная. но раз скриптом, то можно и без лишних врапперов обойтись.

Answer 2

[Сергей Мельников]

.wrapper {
    overflow: hidden;
    height: 150px;
    width: 150px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.wrapper > img {
    max-width: 100%;
    display: inline-block;
}

Comments

[Андрей Силаев]

Спасибо!

Answer 3

[Иван Беленков]

Кроме JS никак, соглашусь =(

Comments

[lastwish]

там вместо DOMready следует onload использовать, т.к. скрипт по ссылке отрабатывает раньше загрузки изображения, и .height() и .width() возвращают 0.

Answer 4

[Anton Essential]

div {
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
}

div img {
    width: 100%;   
}

Comments

[Владимир Кудинов]

overflow:hidden не работает с display:table-cell :(

Answer 5

[Дмитрий]

div {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: relative;
}

div img {
    position: absolute;
    top: -50%;
    left: -50%;
}