Open In App

Bulma Arbitrary ratios with any Element

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma Arbitrary ratios with any element</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"
          href=
    <script src=
    </script>
</head>
<body>
  <div class="content container has-text-centered">
    <h1 class="title has-text-success">
      GeekforGeeks
    </h1>
    <h1 class="subtitle">
      Bulma Arbitrary Ratio in iframe/Image Element
    </h1>
  
     <!-- Arbitrary Ratio in iframe -->
     <figure class="image is-16by9">
      <iframe class="has-ratio"
              width="640"
              height="360" 
              src=
              frameborder="0"
              allowfullscreen>
       </iframe>
    </figure>
    <figure class="image is-4by3">
      <iframe class="has-ratio" 
              width="640" 
              height="360" 
              src=
              frameborder="0" 
              allowfullscreen>
      </iframe>
    </figure>
    <figure class="image is-1by1">
      <iframe class="has-ratio" 
              width="640"
              height="360" 
              src=
              frameborder="0" 
              allowfullscreen>
      </iframe>
    </figure>
  </div>
</body>
</html>


Output:

Bulma Arbitrary ratios with any element

Arbitrary Ratio in iframe

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

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma Arbitrary ratios with any element</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"
          href=
    <script src=
    </script>
</head>
<body>
  <div class="content container has-text-centered">
    <h1 class="title has-text-success">
      GeekforGeeks
    </h1>
    <h1 class="subtitle">
      Bulma Arbitrary Ratio in iframe/Image Element
    </h1>
    <figure class="image is-16by9 has-background-light">
      <img class="has-ratio p-4"
           src=
        alt="Image">
    </figure>
    <figure class="image is-4by3 has-background-light">
      <img class="has-ratio p-4" 
           src="
           alt="Image">
    </figure>
    <figure class="image is-1by1 has-background-light">
      <img class="has-ratio p-4" 
           src=
           alt="Image">
    </figure>
  </div>
</body>
</html>


Output:

Bulma Arbitrary ratios with any element

Bulma Arbitrary ratios with any element

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



Last Updated : 02 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads