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 Fluid Variation is used to take the full width of the container element.
Semantic UI image fluid variation class:
- fluid: It is used for taking the image full width of its container element.
Syntax:
<img class="ui fluid image" src="gfg.png">
Example 1: In this example, we will use Semantic-UI Image Fluid Variations to display the image in full width of its container.
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Image Fluid Variations
</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="ui center aligned container">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Image Fluid Variations</h3>
<img class="ui fluid image" src=
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will use Semantic-UI Image Fluid Variations with Circular Variations to display the image in full width of its container.
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Image Fluid Variations
</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="ui center aligned container">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Image Fluid Variations</h3>
<img class="ui fluid circular image" src=
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/image.html#fluid