Bulma Arbitrary ratios with any Element

In this article, we'll see Bulma Arbitrary Ratio with different elements. The Arbitrary ratios can be used on any element like iframe, etc. To use the arbitrary ratio, just use the has-ratio modifier to the class in which you want to set the ratio. Like you can apply 16by9 ratio class on an iframe or img element. By using this modifier, the user can see the changes and will notice how the ratio is maintained.

Bulma Arbitrary Ratio Classes:

• has-ratio: This class is used to set any specific ratio to any element of HTML.
• is-16by9: This is a parent class that is used to set the aspect ratio of 16 x 9 to the HTML element.
• is-7by3: This is a parent class that is used to set the aspect ratio of 7 x 3 to the HTML element.
• is-4by3: This is a parent class that is used to set the aspect ratio of 4 x 3 to the HTML element.
• is-1by1: This is a parent class that is used to set the aspect ratio of 1 x 1 to the HTML element.

Syntax:

<figure class="image Arbitrary-Ratio-Class">
 <iframe class="has-ratio"
 width="300"
 height="300" src="">
 </iframe>
 ....
 <image class="image.png" src="" alt="" />
</figure>

Example 1: Below example illustrates the Arbitrary ratio in the <iframe> element.

Output:

Example 2: Below example illustrates the Arbitrary ratio using an <image> element.

Output:

Reference: https://bulma.io/documentation/elements/image/#arbitrary-ratios-with-any-element