Dj Dance 185 Опубликовано: 11 марта 2015 Рассказать Опубликовано: 11 марта 2015 Уже замучился экспериментировать Необходимо центрировать изображения в блоке, но никак не могу решить как это реализовать. Что необходимо в конечном результате, попробовал показать на картинке: <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 Опубликовано: 12 марта 2015 Рассказать Опубликовано: 12 марта 2015 Автор Хелп Кстати, с margin ситуация та же. Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 12 марта 2015 Рассказать Опубликовано: 12 марта 2015 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 Опубликовано: 12 марта 2015 Рассказать Опубликовано: 12 марта 2015 Автор Знать ширину, чисто теоретически невозможно, т.к. изображения должны загружаться пользователями и изображения не должны иметь статических ограничений. К сожалению, не подходит данное решение Мысль в том, чтобы фотографии пользователей имели шаблонный вывод и при этом, не обрезались до шаблонных размеров, но в то же время встраивались в нужные блоки без нарушения общих схем дизайна и выглядели при этом соответствующим образом.Самый простой вариант, это как я вижу: <div class="photo" data-image="image.jpg"></div> Ну и немного js, но всё равно, есть желание реализовать на css, если это возможно. Интересно то, что для горизонтального и вертикального, отдельно работает, а вместе нет.Ну и для изображений, размер которых меньше блоков, min-width и min-height + соответственно центрирование Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 12 марта 2015 Рассказать Опубликовано: 12 марта 2015 Mufasa, на http://jsfiddle.net/ironkiss/jo0g9ms6/ 1 Цитата Ссылка на сообщение Поделиться на других сайтах
Dj Dance 185 Опубликовано: 12 марта 2015 Рассказать Опубликовано: 12 марта 2015 Автор Спасибо, с утра испытаю и отпишусь Цитата Ссылка на сообщение Поделиться на других сайтах
Dj Dance 185 Опубликовано: 12 марта 2015 Рассказать Опубликовано: 12 марта 2015 Автор В принципе, работает На основе предложенного метода получилось сделать желаемое. Цитата Ссылка на сообщение Поделиться на других сайтах
baxus 49 Опубликовано: 18 марта 2015 Рассказать Опубликовано: 18 марта 2015 Во вы паритесь то. 1 вариант. Почему бы не сделать доп.поле новости назвав его Фото грузить сюда. А потом в код прописать <img src="допполе" width="300" height="300" /> Тогда просто все загруженые картинки будут внезависимости от размера и формы делаться нужных размеров. 2 вариант. Добавить опять же доп.поле только вставить его в ксс как бекграунд родительского блока, родительскому блоку выставить нужные размеры, а бекграунду нужный позишн. Цитата Ссылка на сообщение Поделиться на других сайтах
Dj Dance 185 Опубликовано: 22 марта 2015 Рассказать Опубликовано: 22 марта 2015 Автор ИскушениЕ, Ранее не писалось о том, что это необходимо для новостей. Никакие доп. поля в априори не рассматривал. Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.