Пользователь
0,0
рейтинг
8 ноября 2012 в 06:16

Разработка → Адаптивные фоновые изображения tutorial

Одна из основных задач при адаптивной верстке — это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.

С картинками в теге img все просто: при установке ширины в процентах высота будет масштабироваться автоматически. К фоновым же изображением такой способ применить нельзя.

Фиксированное соотношение сторон




Данный трюк заключается в установке значения в процентах отступам (padding) элемента. Впервые способ опубликован в старой статье блога A List Apart, однако он до сих пор хорошо работает.

Предположим, что есть фоновое изображение 800 на 450 пикселей,  и нужно сделать его фоном с фиксированным соотношением сторон — 16:9. В коде ниже для отступов используется px, но все будет работать и с em. Также есть HTML5 элемент figure, для его корректной работы в старых браузерах можно использовать HTML5 shiv.

<div class="column">
  <figure class="fixedratio"></figure>
</div>


div.column {
  max-width: 800px;
}

figure.fixedratio {
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
}


Демонстрация

 Добавляем фон


Полученный элемент масштабируется как надо, но если добавить фоновое изображение, результат будет не очень хорошим. Используем атрибут background-size: cover. К сожалению, в Internet Explorer 8 такой способ не работает. Чтобы решить эту проблему, позиционируем фон с помощью background-position. Фоновая картинка должны быть по ширине как минимум равна max-width элемента. В обратном случае картинка будет обрезаться.

<div class="column">
  <figure class="fixedratio"></figure>
</div>


div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}

figure.fixedratio {
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */

  background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg);
  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}


Демонстрация

Резиновое соотношение сторон


Предположим, что есть большое фоновое изображение, которое отлично смотрится на десктопе. Но на мобильном устройстве оно будет слишком мелкое, поэтому правильным решением станет уменьшение ширины фона.



Например картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). Посчитаем атрибуты height и padding-top:



На рисунке показано соотношение сторон фонового изображения при разной ширине. Наклон графика (slope) соответствует атрибуту padding-top, начальная высота (start height) — атрибуту height. В итоге получается код:

<div class="column">
  <figure class="fluidratio"></figure>
</div>


div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}

figure.fluidratio {
  padding-top: 10%;  /* slope */
  height: 120px;  /* start height */

  background-image: url(http://voormedia.com/examples/amsterdam.jpg);
  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}


Демонстрация

Использование SCSS для расчета


Атрибуты padding-top and height можно рассчитывать автоматически при помощи препроцессоров, например SCSS. Пример этого:

/* Calculate fluid ratio based on two dimensions (width/height) */
@mixin fluid-ratio($large-size, $small-size) {
  $width-large: nth($large-size, 1);
  $width-small: nth($small-size, 1);
  $height-large: nth($large-size, 2);
  $height-small: nth($small-size, 2);
  $slope: ($height-large - $height-small) / ($width-large - $width-small);
  $height: $height-small - $width-small * $slope;

  padding-top: $slope * 100%;
  height: $height;

  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}

figure.fluidratio {
  /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */
  @include fluid-ratio(800px 200px, 300px 150px);

  background-image: url(http://voormedia.com/examples/amsterdam.jpg);
}


Примеры взяты из статьи voormedia.com.
Кирилл @grokru
карма
405,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (15)

  • +15
    К фоновым же изображением такой способ применить нельзя.

    Почему нельзя? Можно же заюзать,

    div {
         background-size: 100% auto;
    }
    

    и фон при уменьшении ширины будет пропорционально уменьшаться по высоте. Только IE 8 и ниже не поддерживают.
    • +3
      У IE8 и ниже есть свой кастыль

      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
          src=background.png',
          sizingMethod='scale'
      );
      
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
          src='background.png',
          sizingMethod='scale'
      )";
      
      • +1
        костыль*
        • +1
          Какой позор.
  • +5
    У вас яблочко похоже на грушу :)
  • +12
      background-size: cover;
     -moz-background-size: cover;  /* Firefox 3.6 */
    

    Порядок неверный. Свойство без префикса должно быть последним.
    • +4
      Ждал этот комментарий от pepelsbey.: )
  • 0
    В хроме[Версия 22.0.1229.94] левый отступ становится больше правого:

    image
    • +1
      ну так уберите margin
      {margin: 0;}
  • +8
    я так понимаю, автор топика ВНЕЗАПНО узнал про
    background-size: cover
    и всё? оО
  • +2
    Использование background-size может значительно понизить скорость рендеринга страницы во всех браузерах, всегда стоит помнить об этом и по возможности использовать другие методики для «ресайза» изображений на стороне клиента
  • –1
    background-size: cover не работает с jpg на iOS, не пудрите людям моск.
  • –1
    SVG в фон и не страдать фигнёй.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.