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

132

Для абсолютної горизонтального і вертикального центрування елементів на сторінці пропонуються різні методи, наприклад, на Хабре, ще в 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 та поділіться посиланням на запис в своїх соціальних мережах: