Ratio utilities
You can use these utilities to quickly set a ratio for a block or a video. Just add the corresponding class to a wrapper element.
List of possible ratio:
- .ecl-u-ratio-16-9: 16/9 ratio
- .ecl-u-ratio-4-3: 4/3 ratio
<style type="text/css">
.example {
background-color: #000;
max-width: 50%;
}
.example__content span{
color: #fff;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<h3 class="ecl-heading ecl-heading--h3">16/9 ratio</h3>
<div class="ecl-u-ratio-16-9 example">
<div class="example__content">
<span>16/9</span>
</div>
</div>
<h3 class="ecl-heading ecl-heading--h3">4/3 ratio</h3>
<div class="ecl-u-ratio-4-3 example">
<div class="example__content">
<span>4/3</span>
</div>
</div>
/* No context defined for this component. */
<style type="text/css">
.example {
background-color: #000;
max-width: 50%;
}
.example__content span {
color: #fff;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<h3 class="ecl-heading ecl-heading--h3">16/9 ratio</h3>
<div class="ecl-u-ratio-16-9 example">
<div class="example__content">
<span>16/9</span>
</div>
</div>
<h3 class="ecl-heading ecl-heading--h3">4/3 ratio</h3>
<div class="ecl-u-ratio-4-3 example">
<div class="example__content">
<span>4/3</span>
</div>
</div>
-
Content:
/** * Ratio utilities */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-utility-ratio/generic-utility-ratio'; // Use generic mixin @include exports('eu-utility-ratio') { @include ecl-utility-ratio(); }
- URL: /components/raw/eu-utility-ratio/eu-utility-ratio.scss
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-ratio/eu-utility-ratio.scss
- Size: 242 Bytes
- Handle: @ecl/eu-utility-ratio
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-ratio/eu-utility-ratio.twig