En este artículo, veremos la relación arbitraria de Bulma con diferentes elementos. Las proporciones arbitrarias se pueden usar en cualquier elemento como iframe, etc. Para usar la proporción arbitraria, solo use el modificador has-ratio para la clase en la que desea establecer la proporción. Al igual que puede aplicar la clase de relación 16by9 en un elemento iframe o img. Al usar este modificador, el usuario puede ver los cambios y notará cómo se mantiene la relación.
Clases de proporción arbitraria de Bulma:
- has-ratio: esta clase se utiliza para establecer cualquier proporción específica para cualquier elemento de HTML.
- is-16by9: esta es una clase principal que se usa para establecer la relación de aspecto de 16 x 9 para el elemento HTML.
- is-7by3: esta es una clase principal que se utiliza para establecer la relación de aspecto de 7 x 3 para el elemento HTML.
- is-4by3: esta es una clase principal que se utiliza para establecer la relación de aspecto de 4 x 3 para el elemento HTML.
- is-1by1: esta es una clase principal que se utiliza para establecer la relación de aspecto de 1 x 1 para el elemento HTML.
Sintaxis:
<figure class="image Arbitrary-Ratio-Class">
<iframe class="has-ratio"
width="300"
height="300" src="">
</iframe>
....
<image class="image.png" src="" alt="" />
</figure>
Ejemplo 1: El siguiente ejemplo ilustra la proporción arbitraria en el elemento <iframe>.
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= "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 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= "https://www.youtube.com/embed/l2PyiNFZwNc" frameborder="0" allowfullscreen> </iframe> </figure> <figure class="image is-4by3"> <iframe class="has-ratio" width="640" height="360" src= "https://www.youtube.com/embed/l2PyiNFZwNc" frameborder="0" allowfullscreen> </iframe> </figure> <figure class="image is-1by1"> <iframe class="has-ratio" width="640" height="360" src= "https://www.youtube.com/embed/l2PyiNFZwNc" frameborder="0" allowfullscreen> </iframe> </figure> </div> </body> </html>
Producción:
Relación arbitraria en iframe
Ejemplo 2: El siguiente ejemplo ilustra la proporción arbitraria usando un elemento <image>.
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= "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 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= "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" alt="Image"> </figure> <figure class="image is-4by3 has-background-light"> <img class="has-ratio p-4" src=" https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" alt="Image"> </figure> <figure class="image is-1by1 has-background-light"> <img class="has-ratio p-4" src= "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png" alt="Image"> </figure> </div> </body> </html>
Producción:
Bulma Relaciones arbitrarias con cualquier elemento
Referencia: https://bulma.io/documentation/elements/image/#arbitrary-ratios-with-any-element
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA