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}