Semantic-UI Image Variations
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI has a bunch of components for user interface design. One of them is “image”. Images are used for various purposes on a web page. It is used to magnify particular data for your website. The user might need to show different images in different variations according to his requirements. To depict an image data significance, its variation can vary.
Semantic UI Image Variations:
- Avatar: This variation is used to display an image in line with the content.
- Bordered: This variation is used to give a border to the image.
- Fluid: This variation is used to make the image take the full size of its container.
- Circular: This variation is used to make the image circular.
- Rounded: This variation is used to make the image rounded.
- Vertically aligned: This variation is used to position the image on top, middle or bottom.
- Centered: This variation is used to center the image.
- Spaced: This variation is used to give additional space to the image.
- Floated: This variation is used to make the image float left or right of the content.
- Size: This variation is used to make images vary in size.
<img class="ui image-Variation image" src="gfg.png">
The below examples illustrate all image variations.
Example 1: The following example demonstrates many classes of image variations.
Example 2: The following example demonstrates fluid, bordered, and circular classes for images.