HTML aspect ratio box using Custom Element

Sun, 04 Dec 2016 23:45:23 +0300

There is a standard trick to make HTML block with given proportions:

<div id="containingBlock">
<div id="wrapper" style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
<div id="content" style="position:absolute; left:0; top:0; width:100%; height:100%">
...
</div>
</div>
</div>

Since padding is computed according to containing element width, it’s possible to use it along with width to get required proportions (16:9 in this example, 56.25% = 100% * 9 / 16). And content block is positioned absolutely to use the space taken by padding.

After learning about Custom Elements I decided to see if I can abstract the trick and turn it into something clean and reusable. So it could be used just like this:

<ratio-box ratio="16:9">
...
</ratio-box>

Custom Elements is quite recent feature in HTML, with version 0 available only in Chrome and version 1 just coming into play. It also requires JavaScript to work. So it is not practical to use yet, but still an interesting experiment.

See the code and demo below. In addition, there is also a slightly improved HTML+CSS version.

HTML on MXI

HTML aspect ratio box using Custom Element