Bulma es un marco CSS gratuito y de código abierto que se basa en Flexbox. Ayuda a los desarrolladores a crear sitios web receptivos. En este artículo, discutiremos las imágenes Retina en Bulma.
La clase de imagen en Bulma nos ayuda a especificar este contenedor de tamaño predefinido. La imagen tiene un tamaño fijo, pero podemos usar una imagen que sea varias veces más grande. Supongamos que tenemos un contenedor de imágenes de tamaño 128X128 y queremos insertar la imagen de tamaño 256X256 , entonces podemos insertarla pero se redimensionará a 128X128 para mantener el tamaño correcto. Las imágenes Retina se utilizan en esta situación. Los siguientes ejemplos te ayudarán a entenderlo mejor.
Clases de Bulma Retina:
- is-16×16: esta clase se utiliza para establecer la dimensión de la imagen en 16×16 píxeles.
- is-24×24: esta clase se utiliza para establecer la dimensión de la imagen en 24×24 píxeles.
- is-32×32: esta clase se utiliza para establecer la dimensión de la imagen en 32×32 píxeles.
- is-48×48: esta clase se utiliza para establecer la dimensión de la imagen en 48×48 píxeles.
- is-64×64: esta clase se utiliza para establecer la dimensión de la imagen en 64×64 píxeles.
- is-96×96: esta clase se utiliza para establecer la dimensión de la imagen en 96×96 píxeles.
- is-128×128: esta clase se utiliza para establecer la dimensión de la imagen en 128×128 píxeles.
Sintaxis:
<figure class="image is-128x128">
<img src="image.jpg">
</figure>
Ejemplo 1: en el siguiente ejemplo, hemos utilizado la clase Retina para cambiar el tamaño de la imagen a un tamaño de 128 × 128 píxeles.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body style="padding: 20px"> <h1 class="title" style="color: green"> GeeksforGeeks </h1> <h3 class="subtitle">Bulma Retina</h3> <b>Image without using the Retina class</b> <div style="width: 400px;"> <figure class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220218005137/gfglogo.jpg"> </figure> <b>Image after using the Retina class</b> <figure class="image is-128x128"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220218005137/gfglogo.jpg"> </figure> </div> </body> </html>
Producción:
Imágenes de Bulma Retina
Ejemplo 2: En el siguiente ejemplo, hemos usado la clase Retina para cambiar el tamaño de la imagen a un tamaño de 64×64 píxeles.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body style="padding: 20px"> <h1 class="title" style="color: green">GeeksforGeeks</h1> <h3 class="subtitle">Bulma Retina</h3> <b>Image without using the Retina class</b> <div style="width: 400px;"> <figure class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220218005137/gfglogo.jpg"> </figure> <b>Image after using the Retina class</b> <figure class="image is-64x64"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220218005137/gfglogo.jpg"> </figure> </div> </body> </html>
Producción:
Imágenes de Bulma Retina
Referencia : https://bulma.io/documentation/elements/image/#retina-images
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA