4.1.3 #css_lib.helpers.ratio-box Ratio-box
Helper for creating containers, with proportional width and height. Implemented using a pseudo-element with a padding-bottom in %.
The default aspect ratio is 16:9.
Examples
Default styling
Some content here
[12:41:28] Starting 'style'... [12:41:29] mlut.min.css 12896 B (gzipped)
Block for creating containers, with proportional width and height. The default aspect ratio is 16: 9
.Pt75p_b
4:3 aspect ratio.
Some content here
[12:41:28] Starting 'style'... [12:41:29] mlut.min.css 12896 B (gzipped)
Block for creating containers, with proportional width and height. The default aspect ratio is 16: 9
.Pt100p_b
1:1 aspect ratio.
Some content here
[12:41:28] Starting 'style'... [12:41:29] mlut.min.css 12896 B (gzipped)
Block for creating containers, with proportional width and height. The default aspect ratio is 16: 9
Markup: ../examples/css_lib-helpers/ratio-block/ratio-block.hbs
<div class="ratio-box {{modifier_class}} test-row md_W25p">
<div>
<b>Some content here</b>
<p>[12:41:28] Starting 'style'... [12:41:29] mlut.min.css 12896 B (gzipped)</p>
<p>Block for creating containers, with proportional width and height. The default aspect ratio is 16: 9</p>
</div>
</div>
Source:
../packages/core/src/sass/css/helpers/ratio-box.scss, line 3