Skip to content
Related Articles

Related Articles

Semantic-UI Image Types

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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 various different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style images. It offers images of different types like a normal image and image link. It also provides us with different states like hidden, visible, and also in different variations and states.

In this article, we are going to learn about Semantic-UI Image Types and their implementation using example code.

Semantic-UI Image Type:

1. Image: It is used to insert normal image to the document. The image usually takes the shape of the container, but if specific dimensions are given, the image will take the dimensions specified.

Syntax:

<div class="ui small image">
  <img src="....">
</div>

Example 1:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Image Types</title>
    <link href=
        rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui header green">Geeksforgeeks</h2>
        <strong>Semantic-UI Image Types</strong><br /><br />
        <div class="ui small image">
            <img src=
        </div>
    </div>
</body>
 
</html>


Output:

Example 2: Let us now specify the dimensions of the image in these examples.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Image Types</title>
    <link href=
        rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui header green">Geeksforgeeks</h2>
        <strong>Semantic-UI Image Types</strong><br /><br />
        <div class="ui small image">
            <svg width="150" height="150">
                <image xlink:href=
                    x="0" y="0" width="100%" height="100%"></image>
            </svg>
        </div>
    </div>
</body>
 
</html>


Output:

Example 3:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Image Types</title>
    <link href=
        rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui header green">Geeksforgeeks</h2>
        <strong>Semantic-UI Image Types</strong><br /><br />
        <img class="ui small image" src="
    </div>
</body>
 
</html>


Output:

2. Image Link: If the image is clicked, you will be redirected to the site which is linked. It is formatted in such a way that it is linked with other content.

Syntax:

<a href="...." class="ui medium image">
  <img src=".....">
</a>

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Image Types</title>
    <link href=
        rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <center>
        <div class="ui container">
            <h2 class="ui header green">Geeksforgeeks</h2>
            <strong>Semantic-UI Image Types</strong><br /><br />
            <a href="https://geeksforgeeks.org" class="ui medium image">
                <img src=
            </a>
        </div>
    </center>
</body>
 
</html>


Output:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!