Рассмотрим типичный набор миниатюр изображений:
<ul> <li><a href="#"><img src="http://lorempixel.com/320/180/sports" /></a></li> <li><a href="#"><img src="http://lorempixel.com/320/180/city" /></a></li> <li><a href="#"><img src="http://lorempixel.com/352/198/technics" /></a></li> </ul> Мы можем показать эту галерею в любом размере в адаптивном шаблоне страницы, используя CSS (показаны основные свойства):
ul { width: 100%; padding: 0; margin: 0 0 2em 0; list-style-type: none; } li { float: left; width: 33.3%; padding: 0; margin: 0; background-color: #000; border: 10px solid #fff; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } li a { display: block; width: 100%; } img { display: block; max-width: 100%; }
Это хорошо работает, потому что все наши изображения имеют одинаковое соотношение сторон 16: 9. Высота изображения составляет ровно 56,25% от ширины (9, деленное на 16, выраженное в процентах).
Однако мы, веб-дизайнеры, параноики: люди сговариваются против нас и предоставляют фотографии в бесконечном диапазоне размеров и соотношений сторон, например
<ul> <li><a href="#"><img src="http://lorempixel.com/320/180/sports" /></a></li> <li><a href="#"><img src="http://lorempixel.com/320/320/city" /></a></li> <li><a href="#"><img src="http://lorempixel.com/200/150/technics" /></a></li> </ul>
Существуют различные решения этой проблемы:
- Мы можем изменить размер каждого изображения вручную. Это отнимает много времени и утомительно.
- Мы могли бы реализовать умное решение для автоматического изменения размера изображения на сервере. Это может занять некоторое время, и получающиеся изображения могут быть не такими полированными или оптимизированными, как нам нравится.
- Мы могли бы устроить подобную диве истерику и отказаться работать в таких условиях. Конечно, это непрофессионально, и никто из нас не прибегнет к такой тактике (слишком часто).
Или мы можем использовать CSS для решения проблемы?
Мы можем, но это не так просто, как вы можете ожидать. В старые времена проектирования фиксированной ширины мы знали бы ширину нашего заполнителя изображения. Если бы это было 160px, мы могли бы сделать высоту 90px и рано уйти на пиво. В этом примере наша ширина составляет 33,3% от контейнера минус 20 пикселей для границы на левом и правом краях. Это может быть любой размер, поэтому установка фиксированной высоты будет препятствовать нашему требуемому соотношению сторон.
Процентная уловка
Малоизвестная особенность отступов заключается в том, что установка верхнего или нижнего процентного соотношения основывается на ширине содержащего блока. Если ваш блок имеет ширину 100 пикселей, то padding-top: 30%; слой padding-top: 30%; будет равняться 30 пикселям. Я подозреваю, что это было сделано для облегчения вычислений рендеринга, поскольку высота элементов обычно определяется их содержимым. Кроме того, если у вас был родитель с фиксированной высотой 300px и установлен padding-top: 200%; на ребенке родитель становится размером не менее 600 пикселей, что приводит к рекурсивному каскаду, который разрушает сеть.
Безотносительно причины это очень полезно, так как это позволяет Вам установить внутреннее отношение, например
#element { position: relative; height: 0; padding: 56.25% 0 0 0; }
Этот элемент будет сохранять соотношение 16: 9 в зависимости от ширины контейнера. Высота была установлена в 0px, но, поскольку мы установили position: relative; Мы можем абсолютно позиционировать любой дочерний элемент.
Насколько я знаю, трюк с отступами был впервые выделен Тьерри Кобленцем для создания адаптивного видео , но ту же концепцию можно применить к изображениям или любому другому контенту. Давайте обновим наш эскиз CSS:
li a { display: block; width: 100%; position: relative; height: 0; padding: 56.25% 0 0 0; overflow: hidden; } img { position: absolute; display: block; max-width: 100%; max-height: 100%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
Результат покажет изображение с черными полями, если оно не имеет соответствующего размера 16: 9:
Поиграйте с CSS. При удалении изображения max-width или max-height могут применяться эффекты обрезки, а не изменения размера. Я надеюсь, что вы найдете это полезным.
Если вам интересно узнать больше об адаптивном веб-дизайне, ознакомьтесь с нашей новой книгой Jump Start Responsive Web Design . Это технология отредактирована Крейгом Баклером, автором этой статьи.