Open In App

Semantic-UI Image Types

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 22 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads