Главная » HTML & CSS » Абсолютное центрирование отзывчивого изображения на CSS

Абсолютное центрирование отзывчивого изображения на CSS

Для абсолютного горизонтального и вертикального центрирования элементов на странице предлагаются различные методы, например, на Хабре, ещё в 2013г был представлен перевод отличной статьи с решением от Стефана Шоу, написанной в своё время для Smashing Magazine.
Так что, в этом плане, ничего нового не открою, с центрированием элементов всё предельно ясно.

Однажды, при разработке очередного лайтбокса, мне понадобилось сделать так чтобы просматриваемые , не только выводились абсолютно по центру, но и были гарантированно отзывчивыми, т.е. гибкими и корректно отображающимися при просмотре на экранах различных пользовательских устройств, вне зависимости от размеров оригинальной картинки.
 
Центрирование отзывчивого изображения
 
Для центрирования решение нашёл быстро, использовал flexboxдля контейнера лайтбокса и один из самых простых способов трансформации transform: translate(-50%, -50%); непосредственно для изображения.

Способ конечно не идеальный, требующий дополнительной разметки. Фишка в том, что изображение с установленными максимально возможными значениями высоты и ширины max-width и
max-height в 100%, размещаем в div с нулевыми значениями высоты и ширины, который в свою очередь уже помещаем в контейнер лайтбокса с высотой и широтой 100%.

В заключении, стоит подробнее остановиться на преимуществах и недостатках данного метода. Что касаемо цнтрирования, при использовании flexbox контент может быть любой высоты или ширины, это несомненно плюс, однако напрочь отсутствует поддержка в IE 8-9 и требует разнообразные префиксы для корректной работы в современных браузерах.
Используя transform, в плюсе мы получаем минимальный код и изменяемую высоту, недостатки те же: не работает в IE 8, использование префиксов и может мешать работе других эффектов с transform.
Для реализации конкретно этой задачи, указанные недостатки, если вы не особо озабочены, что в результате увидят пользователи упорно сидящие на IE-шке старых версий, не должны вас волновать, на выхлопе мы получаем вполне себе рабочее решение.
Ну, а как реализовать отзывчивые изображения, корректно отображаемые во всех браузерах, мы рассматривали ранее на наглядных примерах.
Так что из всего вышеизложенного напрашивается простой вывод, что под определённые задачи выбираем определённое решение. Если кому известна универсальная метода, просветите, а пока смотрим демо и ковыряем код, при просмотре изменяйте размеры окна браузера:

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

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

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru