Open In App

Bulma Responsive images with ratios

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free, open-source CSS framework based on Flexbox to build beautiful responsive websites. In this article, we’ll see Bulma responsive images with ratios. We can use images using the Bulma framework in our web application with specific sizes as the user wants but what if the user doesn’t know much about sizes or the dimensions to use in an image! Then, here comes the use of the responsive image ratios of Bulma, where it provides 16 ratio modifiers that include the basic ratios used, like in still photography.

Bulma responsive images with ratios classes:

  • image is-square: This class is used to set the image in square ratio.
  • image is-1by1: This class is used to set the image in a 1:1 aspect ratio.
  • image is-5by4: This class is used to set the image in a 5:4 aspect ratio.
  • image is-4by3: This class is used to set the image in a 4:3 aspect ratio.
  • image is-3by2: This class is used to set the image in a 3:2 aspect ratio.
  • image is-5by3: This class is used to set the image in a 5:3 aspect ratio.
  • image is-16by9: This class is used to set the image in a 16:9 aspect ratio.
  • image is-2by1: This class is used to set the image in a 2:1 aspect ratio.
  • image is-3by1: This class is used to set the image in a 3:1 aspect ratio.
  • image is-4by5:This class is used to set the image in a 4:5 aspect ratio.
  • image is-3by4- This class is used to set the image in a 3:4 aspect ratio.
  • image is-2by3: This class is used to set the image in a 2:3 aspect ratio.
  • image is-3by5: This class is used to set the image in a 3:5 aspect ratio.
  • image is-9by16: This class is used to set the image in a 9:16 aspect ratio.
  • image is-1by2: This class is used to set the image in a 1:2 aspect ratio.
  • image is-1by3: This class is used to set the image in a 1:3 aspect ratio.

Syntax:

<figure class="image is-square Ratios-Classes">
    <img src="link"/>
</figure>

Example: Below example illustrates the Bulma responsive images with ratios.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        Bulma Responsive images with ratios
    </title>
    <link rel="stylesheet"
        href=
    <script src=
    </script>
</head>
 
<body>
    <div class="content ml-4 has-text-centered">
        <h1 class="title has-text-success">
            GeeksforGeeks
        </h1>
        <h1 class="subtitle">
            Bulma Responsive images with ratios
        </h1>
    </div>
    <table id="images"
        class="table is-striped ml-4 columns">
        <tbody class="column">
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-square">
                        <img src=
                    </figure>
                </td>
                <td>Square</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-1by1">
                        <img src=
                    </figure>
                </td>
                <td>1 by 1</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-5by4">
                        <img src=
                    </figure>
                </td>
                <td>5 by 4</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-4by3">
                        <img src=
                    </figure>
                </td>
                <td>4 by 3</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-3by2">
                        <img src=
                    </figure>
                </td>
                <td>3 by 2</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-5by3">
                        <img src=
                    </figure>
                </td>
                <td>5 by 3</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-16by9">
                        <img src=
                    </figure>
                </td>
                <td>16 by 9</td>
            </tr>
        </tbody>
        <tbody class="column">
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-2by1">
                        <img src=
                    </figure>
                </td>
                <td>2 by 1</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-3by1">
                        <img src=
                    </figure>
                </td>
                <td>3 by 1</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-4by5">
                        <img src=
                        </figure>
                </td>
                <td>4 by 5</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-3by4">
                        <img src=
                    </figure>
                </td>
                <td>3 by 4</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-2by3">
                        <img src=
                    </figure>
                </td>
                <td>2 by 3</td>
            </tr>
        </tbody>
        <tbody class="column">
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-3by5">
                        <img src=
                    </figure>
                </td>
                <td>3 by 5</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-9by16">
                        <img src=
                    </figure>
                </td>
                <td>9 by 16</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-1by2">
                        <img src=
                    </figure>
                </td>
                <td>1 by 2</td>
            </tr>
        </tbody>
        <tbody class="column">
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-1by3">
                        <img src=
                    </figure>
                </td>
                <td>1 by 3</td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>


Output:

Reference: https://bulma.io/documentation/elements/image/#responsive-images-with-ratios



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