Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Image Size Variations

Improve Article
Save Article
  • Last Updated : 28 Feb, 2022
Improve Article
Save Article

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 on our website using semantic-ui that make our website look more awesome. Semantic-UI Image Size Variations are used to add the different sizes of images to the web page. 

Semantic UI image size variation classes:

  • mini: It is used to set the image size to mini.
  • tiny: It is used to set the image size to tiny.
  • small: It is used to set the image size to small.
  • medium: It is used to set the image size to medium.
  • large: It is used to set the image size to large.
  • big: It is used to set the image size to big.
  • huge: It is used to set the image size to huge.
  • massive: It is used to set the image size to massive.

Syntax:

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

Example 1: In this example, we will use Semantic-UI Image Size Variations to display images in different sizes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Image Size Variations
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Image Size Variations</h3>
  
        <img class="ui mini centered image" src=
        <br>
        <img class="ui tiny centered image" src=
        <br>
        <img class="ui small centered image" src=
        <br>
        <img class="ui medium centered image" src=
        <br>
        <img class="ui large centered image" src=
        <br>
        <img class="ui big centered image" src=
        <br>
        <img class="ui huge centered image" src=
        <br>
        <img class="ui massive centered image" src=
    </div>
</body>
  
</html>


Output:

Example 2: In this example, we will use Semantic-UI Image Size Variations with Circular Variations to display images in different sizes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Image Size Variations
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Image Size Variations</h3>
  
        <img class="ui mini centered circular image" src=
        <br>
        <img class="ui tiny centered circular image" src=
        <br>
        <img class="ui small centered circular image" src=
        <br>
        <img class="ui medium centered circular image" src=
        <br>
        <img class="ui large centered circular image" src=
        <br>
        <img class="ui big centered circular image" src=
        <br>
        <img class="ui huge centered circular image" src=
        <br>
        <img class="ui massive centered circular image" src=
    </div>
</body>
  
</html>


Output:

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!