Bulma es un marco CSS gratuito y de código abierto que tiene componentes prediseñados como botones, íconos, etc. para acelerar el desarrollo web.
En este artículo veremos cómo usar imágenes cuadradas fijas en Bulma. Imágenes cuadradas fijas En Bulma son contenedores de imágenes de dimensiones fijas que pueden ser útiles en lugares específicos como avatares. Estas clases se utilizan en el elemento de figura, junto con el modificador de imagen , que envuelve el elemento de imagen.
Clases de imágenes cuadradas fijas de Bulma:
- is-16×16: Esta clase se usa para hacer una imagen de 16px*16px.
- is-24×24: esta clase se usa para hacer una imagen de 24px*24px.
- is-32×32: Esta clase se usa para hacer una imagen de 32px*32px.
- is-48×48: Esta clase se usa para hacer una imagen de 48px*48px.
- is-64×64: Esta clase se usa para hacer una imagen de 64px*64px.
- is-96×96: Esta clase se usa para hacer una imagen de 96px*96px.
- is-128×128: Esta clase se usa para hacer una imagen de 128px*128px.
Sintaxis:
<figure class="image is-64x64">
<!-- THis image will be 64px * 64px in size -->
<img src="./link-to-image">
</figure>
El siguiente ejemplo ilustra las imágenes cuadradas fijas de Bulma:
Ejemplo: El siguiente ejemplo ilustra el uso de las clases de imágenes cuadradas fijas en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Rounded Images</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
figure {
margin: 20px auto;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Fixed square images</b>
<div class="container">
<figure class="image is-16x16">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo.png"
alt="Gfg logo">
</figure>
<figure class="image is-24x24">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo.png"
alt="Gfg logo">
</figure>
<figure class="image is-32x32">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo.png"
alt="Gfg logo">
</figure>
<figure class="image is-48x48">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo.png"
alt="Gfg logo">
</figure>
<figure class="image is-64x64">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo.png"
alt="Gfg logo">
</figure>
<figure class="image is-96x96">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo.png"
alt="Gfg logo">
</figure>
<figure class="image is-128x128">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo.png"
alt="Gfg logo">
</figure>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/elements/image/#fixed-square-images