Статьи

Как создать адаптивное CSS-центрированное изображение в CSS3

Сентябрь 11, 2018

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

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

Посмотреть демонстрацию …

HTML

Здесь мало что видно — у нас есть img 

 <img src="http://lorempixel.com/600/450/" class="ri" />

Не забудьте удалить любые атрибуты высоты и ширины.

Резервный CSS

IE6 / 7/8 не понимает медиа-запросы или преобразования, поэтому наше изображение окажется в неправильном месте. Существуют прокладки и собственные свойства, которые могут решить эту проблему, но, на мой взгляд, они часто вызывают больше проблем, чем решают, например, увеличение веса страницы, снижение производительности, проблемы с обслуживанием и т. Д.

Поэтому следующий код обеспечивает разумный запасной вариант для устаревших браузеров и должен работать на большинстве ландшафтно-ориентированных экранов рабочего стола: 

 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-radiusbox-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:emptyempty Это селектор CSS3, поэтому IE8 и ниже не будут анализировать объявление. Мы могли бы использовать альтернативу, такую ​​как Условные комментарии, но это кажется гораздо более эффективным решением и требует всего шесть дополнительных символов.

Создание адаптивного изображения

Наше изображение должно соответствовать размерам области просмотра, чтобы оно никогда не перекрывало края:

  • максимальная ширина должна быть определена, если область просмотра выше, чем она широкая, и
  • максимальная высота должна быть определена, если область просмотра шире, чем она высокая.

Мы можем использовать свойство ориентации медиазапроса, чтобы выполнить тяжелую работу за нас: 

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

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

Просто — и все это делается без какой-либо сложной JavaScripting. Посмотреть демонстрацию …

Пожалуйста, используйте код как вам нравится для ваших собственных проектов. Он может быть использован в качестве основы вашего собственного современного, легкого лайтбокса. Если вы не хотите, чтобы я написал один и предоставил удобный урок? Пожалуйста, перешлите ваши запросы @craigbuckler .

И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как адаптивный веб-дизайн Jump Start .

Комментарии к этой статье закрыты. У вас есть вопрос о CSS3? Почему бы не спросить об этом на наших форумах ?

35
Share: