x
 
Артем Зайцев
18 апреля 2013

Расскажите, пожалуйста, как реализованы фотографии участников в Бюросфере.



Чтобы элегантно заполнить фон контейнера изображением произвольного размера, не обойтись без Яваскрипта.

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


<div id="background-container" 
  style="position: fixed; width: 100%; height: 100%; overflow: hidden;">
  <img id="background-image" width="1280" height="960" style="position: absolute;"
  src="background-image.jpg" />
</div>

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


function cropToFit(image, imgWidth, imgHeight, 
    windowWidth, windowHeight) {
  var imgRatio = imgWidth / imgHeight;
  var windowRatio = windowWidth / windowHeight;

  var imgTop = 0, imgLeft = 0;

  if (imgRatio >= windowRatio) {
    imgHeight = windowHeight;
    imgWidth = Math.round((imgHeight) * imgRatio);
  } else {
    imgWidth = windowWidth;
    imgHeight = Math.round((imgWidth) / imgRatio);
  }

  if (imgWidth != windowWidth) {
    imgLeft = Math.round((windowWidth - imgWidth) / 2);
  }

  if (imgHeight != windowHeight) {
    imgTop = Math.round((windowHeight - imgHeight) / 2);
  }

  image.css({
    width: imgWidth,
    height: imgHeight,
    left: imgLeft,
    top: imgTop
  });
}
Будем вызывать эту функцию при изменении размеров окна:

$(document).ready(
  function()
  {
    var image = $('#background-image');
    var imageWidth = image.attr('width');
    var imageHeight = image.attr('height');
    var $window = $(window);
     
    $window.resize(
      function()
      {
        var windowWidth = $window.width();
        var windowHeight = $window.height();
        cropToFit(image, imageWidth, imageHeight, 
          windowWidth, windowHeight);
      }
    );
    $window.resize();
  }
);
 

Всё в сборе, одним файлом.

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Вадим Макеев
18 апреля 2013

Cтранно, что вы не упомянули свойство background-size со значением cover, которые делают всё то же самое одной строчкой в 83% браузеров (http://caniuse.com/#search=background-size) и лишь для 17% нужен монструозный яваскрипт.

body {
  background: url(neuschwanstein.jpg) 50% no-repeat;
  background-size: cover;
}

Демо на Даблете: http://dabblet.com/gist/5407581.


19 апреля 2013

Спасибо Вадиму и другим восьми советчикам за напоминание о background-size.

Егор Яковишен
18 апреля 2013

Ещё есть джейквери-плагин «Бэкстретч»: http://srobbin.com/jquery-plugins/backstretch/.


19 апреля 2013

Вадим, спасибо за важное замечание. Но пока в эти 17% входит восьмой Эксплорер, я бы использовал Яваскрипт.

Егор Халимоненко
22 апреля 2013

По поводу background-size и IE8

Можно проверять поддерживаемость свойства с помощью CSS.supports(«background-size», «cover») или Modernizr и подключать js только при необходимости. Это даст существенный прирост в производительности отрисовки на мобильных webkit браузерах и даже на десктопных.

Вот пример, работающий в IE8+, старых w3c и современных w3c браузерах:
http://jsfiddle.net/termi/a4NHF/3/show/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

2 1 Как вы верифицируете оценку сроков от сотрудника? 1 Как избежать «эффекта Тильды»? 2