Адаптировать изображение в CSS3

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


Изображение мобильных устройствах
Проблемы просмотра на мобильных устройствах

До недавнего времени, лайтбоксам требовалось выполнить несколько уравнений для определения размера изображения и просмотра. Но, теперь мы можем использовать CSS3 Media Queries и CSS3 transform что бы адаптировать изображение.

Адаптировать изображение

Демо

Код HTML

Всё просто, у нас есть img с классом ri :



<img alt="" src=
http://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua/images/HTML5css/css3/san.jpg" class="ri" />


Адаптировать изображения в CSS3
Адаптировать изображения в CSS3

Не забываем удалить height и width , если есть, должен быть только путь к изображению и класс.

Резервный CSS

Напоминаю что IE6/7/8 не понимают CSS3 Media Queries или CSS3 transform , для IE6/7/8 можно использовать javascript что бы адаптировать изображение. Или применить следующий код, который содержит разумный запасной вариант для старых браузеров и должен работать на большинстве мониторах с альбомной ориентацией:



img.ri
{
	position: absolute;
	max-width: 80%;
	top: 10%;
	left: 10%;
	border-radius: 3px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}


В border-radius и box-shadow не для этих версии браузеров, но они не повредят.

Позиционирование изображения

Для того чтобы разместить изображение в центре, мы будем использовать соответствующие преобразования (с приставками для старых браузеров):



img.ri:empty
{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


img.ri:empty empty является структурным псевдо-классом, для элементов, которые не имеют дочерний (изображение никогда их не должны иметь). Это CSS3 селектор так IE8 и ниже не будет анализировать декларации. Мы могли бы использовать альтернативы, такие как Условные Комментарии , и это гораздо более эффективное решение и требует всего шесть дополнительных символов.

Оформить изображение

Наше изображение должно реагировать на размеры области просмотра.

Мы можем использовать свойства ориентации CSS3 Media Queries:



@media screen and (orientation: portrait) {
  img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
  img.ri { max-height: 90%; }
}


Просто, да? — и все это без каких-либо там сложных JavaScript.

В заключение

Используйте этот код в собственных проектах. Он может быть использован в качестве основы для современного lightbox, например как Visual LightBox

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>