Open In App

Semantic-UI | Images

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 great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
There are different styles of putting images in our web app using semantic-ui to make out website look more awesome. You can put an image or an SVG.
Let’s see some example of how to use semantic-ui for putting images.

Example: This example display a simple image using semantic-ui.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
  
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <h1>Image</h1>
        <img class="ui small image" src=
    </div>
</body>
  
</html>


Output:
 

Example: This example adding a border to the image.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
  
    <body>
        <div class="ui container">
            <h1>Bordered Image</h1>
            <img class="ui medium bordered image" 
                 src=
        </div>
        <script src=
      </script>
    </body>
</html>


Output:
 

You can see the border exactly by running the example in IDE.

Example: This example creating a Circular Image.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
  
    <body>
        <div class="ui container">
            <h1>Circular Bordered Image</h1>
            <img class="ui medium circular bordered image" 
                 src=
        </div>
        <script src=
      </script>
    </body>
</html>


Output:
 

Example: This example creating a Vertically aligned Images.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
         rel="stylesheet" />
    </head>
  
    <body>
        <div class="ui container">
            <h1>Vertically Aligned Images</h1>
            <img class="ui top aligned small image" 
                 src=
            <p>Aligned at Top</p>
            <div class="ui divider"></div>
            <img class="ui middle aligned small image" src=
            <p>Aligned at Middle</p>
            <div class="ui divider"></div>
            <img class="ui bottom aligned small image" src=
            <p>Aligned at Bottom</p>
        </div>
        <script src=
      </script>
    </body>
</html>


Output: 
 

Note: You can add class mini, tiny, small, medium, large, massive to change the size. You can run any of this example by clicking on Run on IDE.
 



Last Updated : 20 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads