Bulma is a free, open-source CSS framework that is based on Flexbox. It helps the developers to build responsive websites. In this article, we will discuss Retina images in Bulma.
The image class in Bulma helps us to specify this predefined size container. The image is fixed in size but we can use an image that is multiple times big. Suppose we have an image container of size 128X128 and we want to insert the image of size 256X256, then we can insert it but it will be resized to 128X128 for maintaining the correct size. The Retina images are used in this situation. The examples below will help you to understand it better.
Bulma Retina Classes:
- is-16×16: This class is used to set the dimension of the image to 16×16 pixels.
- is-24×24: This class is used to set the dimension of the image to 24×24 pixels.
- is-32×32: This class is used to set the dimension of the image to 32×32 pixels.
- is-48×48: This class is used to set the dimension of the image to 48×48 pixels.
- is-64×64: This class is used to set the dimension of the image to 64×64 pixels.
- is-96×96: This class is used to set the dimension of the image to 96×96 pixels.
- is-128×128: This class is used to set the dimension of the image to 128×128 pixels.
Syntax:
<figure class="image is-128x128">
<img src="image.jpg">
</figure>Example 1: In the below example, we have used the Retina class to resize the image to a size of 128×128 pixels.
<!DOCTYPE html> <html>
<head>
<link rel='stylesheet' href=
</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=
</figure>
<b>Image after using the Retina class</b>
<figure class="image is-128x128">
<img src=
</figure>
</div>
</body>
</html>
|
Output:
Bulma Retina Images
Example 2: In the below example, we have used the Retina class to resize the image to a size of 64×64 pixels.
<!DOCTYPE html> <html>
<head>
<link rel='stylesheet' href=
</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=
</figure>
<b>Image after using the Retina class</b>
<figure class="image is-64x64">
<img src=
</figure>
</div>
</body>
</html>
|
Output:
Bulma Retina Images
Reference: https://bulma.io/documentation/elements/image/#retina-images