Необходимо центрировать изображения в блоке

[Dj Dance 185]

Уже замучился экспериментировать Необходимо центрировать изображения в блоке, но никак не могу решить как это реализовать.

Что необходимо в конечном результате, попробовал показать на картинке:

<div class="photo">

<img src="image.jpg" alt="" />

</div>

По сути, необходимо центровать изображение в блоке, независимо от размера изображения. Есть у кого какие варианты? Такой вариант не работает

position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%;

Интересно то, что для горизонтального можно использовать:

position: absolute; right: -50%; left: -50%;

а для вертикального:

position: absolute; top: -50%; bottom: -50%;

А вот вместе не работает

Ну и конечно же, забыл добавить, реализация необходима средствами css без js и без изменения элементов (Должен быть div внутри которого находится изображение). С js реализация простая, а вот с css я не могу решить

[Dj Dance 185]

Хелп Кстати, с margin ситуация та же.

[odys 384]

Mufasa, не зная ширины картинки такое замутить только с использованием css думаю не получится. По крайней мере у меня получилось только если заведомо знать, что ширина картинки раза в полтора шире и выше блока:

<style>

.photo {position:relative;width:400px;height:400px;overflow:hidden;}

.photo img {position: absolute;top:0;left:0;margin: -35% 0 0 -35%;}

</style>


<div class="photo">

    <img src="" />

</div>

[Dj Dance 185]

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

К сожалению, не подходит данное решение

Мысль в том, чтобы фотографии пользователей имели шаблонный вывод и при этом, не обрезались до шаблонных размеров, но в то же время встраивались в нужные блоки без нарушения общих схем дизайна и выглядели при этом соответствующим образом.

Самый простой вариант, это как я вижу:

<div class="photo" data-image="image.jpg"></div>

Ну и немного js, но всё равно, есть желание реализовать на css, если это возможно. Интересно то, что для горизонтального и вертикального, отдельно работает, а вместе нет.

Ну и для изображений, размер которых меньше блоков, min-width и min-height + соответственно центрирование

[odys 384]

Mufasa, на http://jsfiddle.net/ironkiss/jo0g9ms6/

[Dj Dance 185]

Спасибо, с утра испытаю и отпишусь

[Dj Dance 185]

В принципе, работает На основе предложенного метода получилось сделать желаемое.

[baxus 49]

Во вы паритесь то.

1 вариант. Почему бы не сделать доп.поле новости назвав его Фото грузить сюда. А потом в код прописать <img src="допполе" width="300" height="300" /> Тогда просто все загруженые картинки будут внезависимости от размера и формы делаться нужных размеров.

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

[Dj Dance 185]

ИскушениЕ, Ранее не писалось о том, что это необходимо для новостей. Никакие доп. поля в априори не рассматривал.