Bulma Image Variables

Bulma is a free and open-source CSS framework based on flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
The image class is kind of a container since images took a few minutes to load, an image container reserved space for that image so that website’s layout not going to break while image loading or even in image errors.

Syntax:

<figure class="image">
 <img src= "path">
</figure>

Syntax:

$property-name: property-value;

Variable Used:

• $dimensions: This variable is used to define the dimension of the image. It holds a string type value and the default value is 16 24 32 48 64 96 128.

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the image.

SCSS Code:

$dimensions: 250px;
.image{
 width:$dimensions;
 }

Compiled CSS Code:

.image {
 width:250px; 
}

Output:

Example 2:  In the below code, we will make use of the above variable to demonstrate the use of the image.

SCSS Code:

$dimensions: 150px;
.image{
 max-width:$dimensions;
}

Compiled CSS Code:

.image {
 max-width: 150px;
}

Output:

Reference: https://bulma.io/documentation/elements/image/