Semantic-UI Image Circular Variations

Last Updated : 28 Feb, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

There are different styles of putting images in our website using semantic-ui that makes our website look more awesome. Semantic-UI Image Circular Variation is used to create circular images.

Semantic UI image circular variation class:

circular: It is used to create circular images for the web pages.

Syntax:

<img class="ui medium circular image" src="gfg.png">

Example 1: In this example, we will describe the Semantic-UI Image Circular Variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Image Circular 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 center aligned container"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Image Circular Variations</h3> 
  
        <img class="ui centered circular image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will describe the Semantic-UI Image Circular Variation with different sizes variations.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Image Circular 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 center aligned container"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Image Circular Variations</h3> 
  
        <img class="ui mini centered circular image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <br> 
        <img class="ui tiny centered circular image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <br> 
        <img class="ui small centered circular image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <br> 
        <img class="ui medium centered circular image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <br> 
        <img class="ui large centered circular image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <div style="padding-bottom: 400px;"></div> 
    </div> 
</body> 
  
</html>