Ratio Box

Type: Mixin

@include ratio-box();

* You can call mixins with or without gls- namespace (e.g. @include gls-ratio-box();).

Ratio Box Sass mixin helps you create proportional CSS boxes based on the aspect ratio values you pass. This mixin is especially useful when you apply the background-image CSS property to the selected element: Whatever the width of the selected element, the aspect ratio will always be preserved.

Ratio Box mixin works based on the same principles as the Responsive Video mixin. The usage is the same too.

Important: Any direct child element that you put inside the ratio box container will be absolutely positioned and take up as much space as the container’s itself.

Danger: Do not put more than one direct child element inside the ratio box containers.

Github Source Code

Arguments

Name	Type	Description
`$ratio`	`string, number`	The aspect ratio of the selected item. Accepts either `number` or `string` type of values. You can pass any aspect ratio value you want in the following formats: `16/9`, `4/3`, `1/1`. The default ratio value is set to `16/9`.

* The value you pass can be with or without the quotation marks.

Examples

Simply call the mixin without passing any argument. The default value is set to 16/9.

.element{
  @include ratio-box;
}

//CSS Output
.element {
  position: relative;
}
.element::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Now let’s change the aspect ratio, and try it with a real world example and use one more mixin from the library just to apply a background image to the selected element.

.element{
  @include ratio-box(4/3);
  @include background-image("/images/backgrounds/06.jpg");
}

//CSS Output
.element {
  position: relative;
  background-image: url("/images/backgrounds/06.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.element::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Now let’s pass a string value! I guarantee the result will be the same.

.element{
  @include ratio-box("4/3");
}

//CSS Output
.element {
  position: relative;
}
.element::before {
  content: "";
  display: block;
  padding-top: 75%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

You can use the : sign to seperate two numbers instead of "/".

Important: If you use colon sign inside the argument, the entire value should always be wrapped with quotation signs just like in the below example.

.element{
  @include ratio-box("16:9");
}

//CSS Output
.element {
  position: relative;
}
.element::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Now let’s try again with a very bizarre aspect ratio, give the selected element a max-width value and put a direct child element in it that contains some dummy text.

Important: If you use colon sign inside the argument, the entire value should always be wrapped with quotation signs just like in the below example.

<div class="element">
  <span class="text">The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets.</span>
</div>

.element{
  max-width: 500px;
  background-color: crimson;
  @include ratio-box(16/6);
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    color: white;
  }
}

//CSS Output
.element {
  max-width: 500px;
  background-color: crimson;
  position: relative;
}
.element::before {
  content: "";
  display: block;
  padding-top: 37.5%;
}
.element > * {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.element .text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  color: white;
}

The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets.