Semantic UI Image is a component of Semantic Elements that allows you to display images in an elegant and consistent way. In this tutorial, we will explore Semantic UI Image, its syntax, example, output, explanation, use, and important points.
<img class="ui image" src="image_url" alt="image_description">
Let's consider an example of Semantic UI Image component. In the following example, we will display an image using the Semantic UI Image component.
<img class="ui image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png" alt="placeholder_image">
Here are some common variations for Semantic UI images.
<div>
<img class="ui avatar image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<span>Username</span>
</div>
<div>
<img class="ui small bordered image"
src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
</div>
<div>
<img class="ui small fluid image"
src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
</div>
<div>
<img class="ui rounded bordered image"
src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
</div>
<div>
<img class="ui circular bordered image"
src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
</div>
An image can specify its vertical alignment.
<img class="ui top aligned tiny image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<span>Top Aligned</span>
<div class="ui divider"></div>
<img class="ui middle aligned tiny image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<span>Middle Aligned</span>
<div class="ui divider"></div>
<img class="ui bottom aligned tiny image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<span>Bottom Aligned</span>
An image may appear at different sizes.
<img class="ui mini image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui tiny image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui small image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui medium image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui large image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui big image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui huge image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui massive image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
A group of images can be formatted to have the same size.
<div class="ui tiny images">
<img class="ui image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
<img class="ui image" src="https://static.additionalsheet.com/images/semantic-ui/2023-12-05square-image.png">
</div>
The Semantic UI Image component allows you to display images in an elegant and consistent way. It includes built-in styles and functionality that you can use to customize the image display. The img tag is used to define an image. The class attribute is used to specify the class name of the component. The src attribute is used to specify the URL of the image file. The alt attribute is used to provide a description of the image for accessibility purposes.
Semantic UI Image is used to display images in an elegant and consistent way. It is particularly useful for web applications that display a lot of images, such as e-commerce sites, blogs, and social media platforms. You can use the built-in styles and functionality to customize the image display to match your application design.
img tag is used to define an image.class attribute is used to specify the class name of the component.src attribute is used to specify the URL of the image file.alt attribute is used to provide a description of the image for accessibility purposes.In this tutorial, we explored Semantic UI Image, its syntax, example, output, explanation, use, and important points. Semantic UI Image is a component of Semantic Elements that allows you to display images in an elegant and consistent way. It is particularly useful for web applications that display a lot of images, such as e-commerce sites, blogs, and social media platforms. By using the built-in styles and functionality, you can easily customize the image display to match your application design.