Перейти к публикации

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


Рекомендованные сообщения

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

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

img.jpg


<div class="photo">

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

</div>

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

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

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

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

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

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

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

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

Ссылка на сообщение
Поделиться на других сайтах

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>

Ссылка на сообщение
Поделиться на других сайтах

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

img.jpg

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

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

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


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

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

Ссылка на сообщение
Поделиться на других сайтах

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

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...