Ratio Box

Arguments

NameTypeDescription
$ratiostring, 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.