Semantic-UI Image Size 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 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...