Accoutrement 2.1.1

@mixin fluid-ratio()

Establish a fluid-height container based on an aspect ratio.

Since 1.0.0:

  • NEW: Accepts $source map argument, for custom source-palette

Since 0.1.0:

  • BREAKING: Uses the new shared map syntax, and ratio settings

Parameters

$ratio: '_widescreen' (float | string)

The ratio of width over height, or a ratio keyword.

$width: 100% (length)

The established fluid width of the element.

$position: relative (relative | absolute | fixed | null)

Establish a positioning context, so children can be stretched to fit.

$source: $ratios (map)

Optional accoutrement-format map of ratios to use as the origin palette (in addition to the provided defaults)

Example

scss
.media {
  @include fluid-ratio('_widescreen');
}
css compiled
.media {
  height: 0;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

Requires

@function fluid-ratio()

@function fluid-ratio()

Return a padding-height based on a given ratio and fluid width.

Since 1.0.0:

  • NEW: Accepts $source map argument, for custom source-palette

Since 0.1.0:

  • BREAKING: Uses the new shared map syntax, and ratio settings

Parameters & Return

$ratio: '_widescreen' (float | string)

The ratio of width over height, or a ratio keyword.

$width: 100% (length)

The established fluid width of the element.

$source: $ratios (map)

Optional accoutrement-format map of ratios to use as the origin palette (in addition to the provided defaults)

@return (percentage)

A fluid height, based on the width and ratio.

Example

scss
.media {
  width: 100%;
  padding-top: fluid-ratio('_widescreen');
}
css compiled
.media {
  width: 100%;
  padding-top: 56.25%;
}

Requires

@function ratio()

Used By

@mixin fluid-ratio()