VOOZH about

URL: https://www.geeksforgeeks.org/css/bulma-responsive-images-with-ratios/

⇱ Bulma Responsive images with ratios - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bulma Responsive images with ratios

Last Updated : 14 Mar, 2022

Bulma is a free, open-source CSS framework based on Flexbox to build beautiful responsive websites. In this article, we'll see Bulma responsive images with ratios. We can use images using the Bulma framework in our web application with specific sizes as the user wants but what if the user doesn't know much about sizes or the dimensions to use in an image! Then, here comes the use of the responsive image ratios of Bulma, where it provides 16 ratio modifiers that include the basic ratios used, like in still photography.

Bulma responsive images with ratios classes:

  • image is-square: This class is used to set the image in square ratio.
  • image is-1by1: This class is used to set the image in a 1:1 aspect ratio.
  • image is-5by4: This class is used to set the image in a 5:4 aspect ratio.
  • image is-4by3: This class is used to set the image in a 4:3 aspect ratio.
  • image is-3by2: This class is used to set the image in a 3:2 aspect ratio.
  • image is-5by3: This class is used to set the image in a 5:3 aspect ratio.
  • image is-16by9: This class is used to set the image in a 16:9 aspect ratio.
  • image is-2by1: This class is used to set the image in a 2:1 aspect ratio.
  • image is-3by1: This class is used to set the image in a 3:1 aspect ratio.
  • image is-4by5:This class is used to set the image in a 4:5 aspect ratio.
  • image is-3by4- This class is used to set the image in a 3:4 aspect ratio.
  • image is-2by3: This class is used to set the image in a 2:3 aspect ratio.
  • image is-3by5: This class is used to set the image in a 3:5 aspect ratio.
  • image is-9by16: This class is used to set the image in a 9:16 aspect ratio.
  • image is-1by2: This class is used to set the image in a 1:2 aspect ratio.
  • image is-1by3: This class is used to set the image in a 1:3 aspect ratio.

Syntax:

<figure class="image is-square Ratios-Classes">
 <img src="link"/>
</figure>

Example: Below example illustrates the Bulma responsive images with ratios.

Output:

👁 Image

Reference: https://bulma.io/documentation/elements/image/#responsive-images-with-ratios

Comment
Article Tags: