Точка фокуса в адаптивных изображениях

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



Focal Point — это HTML/CSS фреймворк, представленный на GitHub, автор — Adam Bradley. Один из простых способов работы с адаптивными изображениями — это обрезание сторон, которые не помещаются на экране. Однако при этом можно случайно обрезать полезное пространство изображения. С помощью Focal Point можно указать важные точки фокуса картинки, которые не будут обрезаны:



Принцип работы достаточно прост: все изображение специальной сеткой делится в пропорции 12х12:



Теперь необходимо по импровизированным координатам выбрать точку фокуса на изображении. Обычно это лицо на фотографии. Считать необходимо от центра сетки, в приведенном примере лицо расположено на три клетки выше и на три правее центра:



Перейдем к коду. Разметка достаточно проста, в классах блока указывается focal-point и координаты точки фокуса. Недостатком фреймворка является необходимость заключать изображение в два div'а:

<div class="focal-point right-3 up-3">
  <div><img src="guy.jpg" alt=""></div>
</div>

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



Вот два живых примера подобных адаптивных изображений. Итоговая разметка получается не слишком громоздкая, HTML:

<div class="column">
  <h1>Focal Point</h1>
  <p>Lorem ipsum...</p>
 
  <div class="focal-point right-3 up-3">
    <div><img src="guy.jpg" alt="guy"></div>
  </div>
</div>
 
<div class="column">
  <h1>Focal Point</h1>
  <p>Lorem ipsum...</p>
 
  <div class="focal-point right-2 up-2">
    <div><img src="couple.jpg" alt="couple"></div>
  </div>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
 
.column {
  float: left;
  overflow: auto;
  padding: 20px;
  width: 50%;
}
 
h1  {
  text-transform: uppercase;
  font: bold 45px/1.5 Helvetica, Verdana, sans-serif;
}
 
p {
  margin-bottom: 20px;
  color: #888;
  font: 14px/1.5 Helvetica, Verdana, sans-serif;
}
 
@media all and (max-width: 767px) {
  p {
    font-size: 12px;
  }
 
  h1 {
    font-size: 35px;
  }
}
 
@media all and (max-width: 550px) {
  h1 {
    font-size: 23px;
  }
}

Что касается кроссбраузерности, то способ работает во всех современных браузерах, включая IE8. Если посмотреть глубже, в принцип работы фреймворка, то все оказывается достаточно просто: в CSS прописаны все классы координат точек фокуса с помощью media queries:

@media all and (max-width: 767px) {
 
    /* 4x3 Landscape Shape (Default) */
    .focal-point div {
        margin: -3em -4em;
    }
 
    /* Landscape up (Total 6em) */
    .up-3 div {
        margin-top:    -1.5em;
        margin-bottom: -4.5em;
    }
     
    .right-3 div {
        margin-left:  -6em;
        margin-right: -2em;
    }
}

Поэтому в случае небольшого количества изображений, которые необходимо масштабировать на сайте, можно обойтись без всего фреймворка Focal Point, просто использовав нужную часть CSS.

Примеры сайта DesignShack.