Dimensions

Получить соотношение сторон элемента. Внутренние размеры, не превышающие максимума. Размеры покрытия.

Размеры объекта

Объект Dimensions предоставляет доступ к трем удобным функциям, а именно:

.ratio()

Получить соотношение сторон элемента

Эта функция возвращает соотношение сторон размеров элемента по сравнению с определенным значением.

ratio(dimensions, prop, value)

Параметр	Тип	По умолчанию	Описание
`dimensions`	Объект	`null`	`width` и `height` какого-либо элемента.
`prop`	String	`null`	Свойство для сравнения: `width` или `height`.
`value`	Number	`null`	Значение для сравнения.

Пример использования Dimensions.ratio()

<div class="uk-inline">
    <img id="example" width="1800" height="1200" src="..." alt="Пример изображения">
</div>

var myEement = util.$('#example');
var Dimensions = util.Dimensions;

var myDimensions = {
  width : myEement.width,
  height: myEement.height
};

// Получаем соотношение для ширины 100 пикселей
console.log(Dimensions.ratio(myDimensions, 'width', 100))

В данном примере существующее изображение имеет width равную 1800 пискселей и height равную 1200 пикселей. При уменьшении изображения до 100 пикселей в ширину его адаптивная высота будет составлять 66,66, т.е. в результате округления высота получается 67 пикселей.

Результат

{height: 67, width: 100}

.contain()

Размеры, содержащиеся внутри и не превышающие максимума

Внутренние размеры, не превышающие максимума. Эта функция возвращает размеры, которые содержатся внутри определенных максимальных размеров.

contain(dimensions, maxDimensions)

Параметр	Тип	По умолчанию	Описание
`dimensions`	Объект	`null`	`width` и `height` какого-либо элемента.
`maxDimensions`	Объект	`null`	Максимальная `width` и `height`, соответствующие требованиям.

Пример использования Dimensions.contain()

<div class="uk-inline">
    <img id="example" width="600" height="400" src="..." alt="Пример изображения">
</div>

var myEl = util.$('#example');

var myDimensions = {
  width : myEl.width,
  height: myEl.height
};

var maxDimensions = {
  width : 200,
  height: 200
};

// Получить содержащиеся размеры
console.log(util.Dimensions.contain(myDimensions, maxDimensions))

Результат

{height: 133, width: 200}

.cover()

Получить размеры покрытия

Эта функция возвращает размеры, которые "покрывают" определенные максимальные размеры. Если к примеру имеется широкая картинка 1800x1200, а при получении указаны макс. ширина и высота равные 200 пикс., то в результате вычислений "покрываемая" ширина на получаемом выходе будет равна 301.

cover(dimensions, maxDimensions)

Параметр	Тип	По умолчанию	Описание
`dimensions`	Объект	`null`	`width` и `height` какого-либо элемента.
`maxDimensions`	Объект	`null`	Максимальная `width` и `height`, соответствующие требованиям.

Пример использования Dimensions.cover()

<div class="uk-inline">
    <img id="example" width="600" height="400" src="..." alt="Пример изображения">
</div>

var myElem = util.$('#example');
var Dimensions = util.Dimensions;

var myDimensions = {
  width : myElem.width,
  height: myElem.height
};

var maxDimensions = {
  width : 200,
  height: 200
};

// Получаем размер покрытия
console.log(Dimensions.cover(myDimensions, maxDimensions))

Результат

{width: 301, height: 200}