Bulma Responsive imágenes con ratios

Bulma es un marco CSS gratuito y de código abierto basado en Flexbox para crear hermosos sitios web receptivos. En este artículo, veremos imágenes receptivas de Bulma con proporciones. Podemos usar imágenes utilizando el marco de Bulma en nuestra aplicación web con tamaños específicos que el usuario quiera, pero ¿qué pasa si el usuario no sabe mucho sobre los tamaños o las dimensiones para usar en una imagen? Luego, aquí viene el uso de las proporciones de imagen receptivas de Bulma, donde proporciona 16 modificadores de proporción que incluyen las proporciones básicas utilizadas, como en la fotografía fija.

Imágenes receptivas de Bulma con clases de proporciones:

image is-square: esta clase se utiliza para establecer la imagen en proporción cuadrada.
image is-1by1: esta clase se utiliza para configurar la imagen en una relación de aspecto de 1:1.
image is-5by4: esta clase se utiliza para configurar la imagen en una relación de aspecto de 5:4.
image is-4by3: esta clase se utiliza para configurar la imagen en una relación de aspecto de 4:3.
image is-3by2: esta clase se utiliza para configurar la imagen en una relación de aspecto de 3:2.
image is-5by3: esta clase se utiliza para configurar la imagen en una relación de aspecto de 5:3.
image is-16by9: esta clase se utiliza para configurar la imagen en una relación de aspecto de 16:9.
image is-2by1: esta clase se utiliza para configurar la imagen en una relación de aspecto de 2:1.
image is-3by1: esta clase se utiliza para configurar la imagen en una relación de aspecto de 3:1.
image is-4by5: esta clase se utiliza para configurar la imagen en una relación de aspecto de 4:5.
image is-3by4- Esta clase se utiliza para configurar la imagen en una relación de aspecto de 3:4.
image is-2by3: esta clase se utiliza para configurar la imagen en una relación de aspecto de 2:3.
image is-3by5: esta clase se utiliza para configurar la imagen en una relación de aspecto de 3:5.
image is-9by16: esta clase se utiliza para configurar la imagen en una relación de aspecto de 9:16.
image is-1by2: esta clase se utiliza para configurar la imagen en una relación de aspecto de 1:2.
image is-1by3: esta clase se utiliza para configurar la imagen en una relación de aspecto de 1:3.

Sintaxis:

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

Ejemplo: El siguiente ejemplo ilustra las imágenes sensibles de Bulma con proporciones.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        Bulma Responsive images with ratios
    </title>
    <link rel="stylesheet"
        href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
    <script src=
"https://use.fontawesome.com/releases/v5.15.4/js/all.js">
    </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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>Square</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-1by1">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>1 by 1</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-5by4">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>5 by 4</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-4by3">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>4 by 3</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-3by2">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>3 by 2</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-5by3">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>5 by 3</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-16by9">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>16 by 9</td>
            </tr>
        </tbody>
        <tbody class="column">
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-2by1">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>2 by 1</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-3by1">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>3 by 1</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-4by5">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                        </figure>
                </td>
                <td>4 by 5</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-3by4">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>3 by 4</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-2by3">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>2 by 3</td>
            </tr>
        </tbody>
        <tbody class="column">
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-3by5">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>3 by 5</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-9by16">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>9 by 16</td>
            </tr>
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-1by2">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>1 by 2</td>
            </tr>
        </tbody>
        <tbody class="column">
            <tr>
                <td style="width: 10rem">
                    <figure class="image is-1by3">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download-200x200.png" />
                    </figure>
                </td>
                <td>1 by 3</td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>

Producción:

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

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta