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

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

Оглавление:
  1. Адаптировать
  2. Резервный CSS
  3. Позиционирование изображения
  4. Оформить изображение
Изображение мобильных устройствах
Проблемы просмотра на мобильных устройствах

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

Адаптировать

Демо

HTML

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

<img alt="" src="http://htmlhook.ru/wp-content/uploads/2013/04/san.jpg" class="ri" />
Адаптировать изображения в CSS3
Адаптировать изображения в CSS3 для старых браузеров IE

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

к меню ↑

Резервный CSS

IE6/7/8 не понимают Медиа-запросы и CSS3 transform, для них можно использовать 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 не для этих версии браузеров, но они не повредят.

к меню ↑

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

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

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 является структурным псевдоклассом, для элементов которые не имеют дочерних элементов т.е пустой (это не для изображений). Мы могли бы использовать альтернативы, такие как Условные Комментарии — это гораздо более эффективное решение и требует всего шесть дополнительных символов.

к меню ↑

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

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

Мы можем использовать Медиа-запросы:

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

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

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