Bulma Fixed square images

Last Updated : 20 Jan, 2022

Bulma is a free and open-source CSS framework that has prebuilt components like buttons, icons, etc. to make web development faster.

In this article, we will see how to use fixed square images in Bulma. Fixed Square Images In Bulma are fixed dimensions image containers that can be useful in specific places like avatars. These classes are used on the figure element, along with the image modifier, which wraps the image element.

Bulma Fixed Square Images Classes:

is-16×16: This class is use to make image 16px*16px.
is-24×24: This class is use to make image 24px*24px.
is-32×32: This class is use to make image 32px*32px.
is-48×48: This class is use to make image 48px*48px.
is-64×64: This class is use to make image 64px*64px.
is-96×96: This class is use to make image 96px*96px.
is-128×128: This class is use to make image 128px*128px.

Syntax:

<figure class="image is-64x64">
    <!-- THis image will be 64px * 64px in size -->
    <img src="./link-to-image">
</figure>

Below example illustrate the Bulma Fixed square images:

Example: The below example illustrates the use of the fixed square image classes in 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>