Semantic-UI Image Variations

Last Updated : 22 Apr, 2022

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.

Syntax:

<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.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Image Variations</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body>
    <div class="ui container">
         
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
 
<p>Semantic UI images Variations</p>
 
</b>
        <hr><br/>
        <span>Avatar & Circular image :   </span>
        <img class="ui avatar tiny circular image"
             style="margin-right:10px"
             src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'>
        <span>Rounded image :   </span>
        <img class="ui tiny rounded image"
             style="display:inline;margin-right:10px"
             src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'>
        <span>Bordered image :   </span>
        <img class="ui tiny bordered image"
             style="display:inline;"
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png">
        <br/>
         
 
<p>Centered image :  </p>
 
 
 
        <div class="ui segment">
            <img class="ui tiny centered image"
                src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'><br />
             
 
<p>As the placement season is back,
                  GeeksforGeeks is here to help you crack the interview.
                  We have selected some most commonly asked and MUST DO practice problems
               to crack Product-based
               Company Interviews. You can also take part in our mock placement
               contests which will help you learn different
               topics and practice at the same time, simulating
               the feeling of a real placement test environment.
             </p>
 
 
 
        </div>
        <img class="ui top aligned tiny image" src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'>
        <span>Vertically Top Aligned</span>
        <br />
        <span>Spaced image:   
             As the placement season is back, 
            <img class="ui mini spaced image" src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'>
            is here to help you crack the interview.
        </span>
        <br />
        <span>Floated image:   </span>
        <div class="ui segment"
             style="padding-bottom:30px">
            <img class="ui small left floated image"
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png">
             
 
<p> As the placement season is back, 
                GeeksforGeeks is here to help you crack the interview.
                We have selected some most commonly asked and MUST DO practice
                problems to crack Product-based
                Company Interviews. You can also take part in our mock placement
                contests which will help you learn different
                topics and practice at the same time, simulating
                the feeling of a real placement test environment.
            </p>
 
 
 
        </div>
        <br />
        <span>Image Sizes:   </span>
        <div class="ui images">
            <img class="ui mini image"
                 src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'>
            <img class="ui tiny image"
                 src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'>
            <img class="ui small image"
                 src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'>
        </div>
    </div>    
</body>
</html>

Output:

Image VariationsSemantic-UI Image Variations

Example 2: The following example demonstrates fluid, bordered, and circular classes for images.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Image Variations</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body style="width:400px;height:400px;margin:100px;">
    <div class="ui container">        
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
 
<p>Semantic UI images Variations</p>
 
</b>
        <hr><br />
        <span>Fluid, Bordered and Circular image :   </span>
        <br /><br />
        <img class="ui bordered fluid circular image"
             style="margin-right:10px"
             src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png">
    </div>
</body>
</html>

Output:

Semantic-UI Image Variations

Reference: https://semantic-ui.com/elements/image.html

Suggest improvement

Semantic-UI Image States

Semantic-UI Image Groups

Share your thoughts in the comments

Semantic-UI Button

Semantic-UI Divider

Semantic-UI Header