Skip to content

Модуль для работы с картинками

Цель

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

Данный модуль предоставляет следующие возможности:

  • выравнить картинку по центру (вертикально и горизонтально) области
  • вписывание или растягивание (с обрезанием) картинки в заданную область
  • создание адаптивных квадратных или круглых изображений

Разметка

Данный модуль предоставляет набор стилей и классов.

Ключивым является соблюдение разметки, при которой картинка всегда вставляется в контейнер с классом .image-container.

<div class="image-container">
  <img src="image_source" />
</div>

Дальнейшее настройка вида осуществляется за счет добавления управляющих классов к контейнеру.

Квадратная картинка

.is-square - делает область квадратной

<body>
  <div class="example">
    <div class="image-container is-square">
      <img src="example.png" />
    </div>
  </div>

  <style>
    .example {
      max-width: 400px;
    }
  </style>
</body>

Здесь мы создаем область шириной не более 400px, в которую вписываем квадрат с картинкой. Данный квадрат имеет ребро указанного размер, и будет менять свой размер в зависимости от размера контейнера, с сохранением пропорций.

Круглая картинка

.is-rounded - делаеть область круглой

<body>
  <div class="example">
    <div class="image-container is-rounded">
      <img src="example.png" />
    </div>
  </div>

  <style>
    .example {
      max-width: 400px;
    }
  </style>
</body>

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

Растягивание картинки

.is-cover - растягивает картинку на заданную область, с сохранением пропорций.

<body>
  <div class="example">
    <div class="image-container is-rounded">
      <img src="example.png" />
    </div>
  </div>

  <style>
    .example {
      max-width: 400px;
    }
  </style>
</body>

Warning

Для браузеров, которые не поддерживют css свойство object-fit, есть fallback, работающиц на Js, его использование описано ниже.

Методы

JS часть модуля доступна в InSalesUI.Images, и представлена методами:

  • checkCover() - проверка, поддерживает ли браузер css свойство object-fit и применяет fallback ко всем контейнерам .image-container.

Примеры