Semantic-UI Image Group Size
Last Updated :
09 Mar, 2022
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.
Semantic UI has a bunch of components for user interface design. One of them is “Image”. Images are an important tool to depict information on web pages. Users can interact with them by clicking or hovering on them. Depending on the requirements of the usage of images there are different variations of images. One of them is the group size.
Semantic UI Image Group Size variation is used to show groups of images in a specific size. The user might need to display some images in the UI with a fixed size. In that case, group size variation comes in handy. Users can show the images as a particular group.
Semantic UI Image Group Size classes:
- mini: This class is used to set mini-size images in a group.
- tiny: This class is used to set tiny-size images in a group.
- small: This class is used to set small-size images in a group.
- medium: This class is used to set medium-size images in a group.
- large: This class is used to set large-size images in a group.
- big: This class is used to set big-size images in a group.
- huge: This class is used to set huge size images in a group.
- massive: This class is used to set massive size images in a group.
Syntax:
<div class="ui mini images">
<img class="ui image" src="...." />
<img class="ui image" src="..." />
....
</div>
Example 1: This example demonstrates the group size variation using the small class. Users can see all the images in a specific size. You can see the output in the image below which shows all small-size images.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Image Group Size Variation</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<br/><br/>
<h2 class="ui header green">GeeksforGeeks</h2>
<strong>Semantic UI Group Size Variation</strong>
<hr><br/>
<strong>Group of Small size:</strong>
<br/><br/>
<div class="ui small images">
<img class="ui image"
src=
<img class="ui image"
src=
<img class="ui image"
src=
<img class="ui image"
src=
</div>
</div>
</body>
</html>
|
Output :
Semantic-UI Image Group Size
Example 2: This example demonstrates the group size variation using the tiny class. You can see the output in the image below which shows all tiny size images.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Image Group Size Variation</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<br/><br/>
<h2 class="ui header green">GeeksforGeeks</h2>
<strong>Semantic UI Group Size Variation</strong>
<hr><br />
<strong>Group of Tiny size:</strong>
<br /><br />
<div class="ui tiny images">
<img class="ui image"
src=
<img class="ui image"
src=
<img class="ui image"
src=
<img class="ui image"
src=
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Image Group Size
Reference: https://semantic-ui.com/elements/image.html#size
Share your thoughts in the comments
Please Login to comment...