Semantic-UI | Images
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui container" > < h1 >Image</ h1 > < img class = "ui small image" src = "https://media.w3wiki.net/wp-content/uploads/20200505154108/image30.png" > </ div > </ body > </ html > |
Output:
Example: This example adding a border to the image.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < div class = "ui container" > < h1 >Bordered Image</ h1 > < img class = "ui medium bordered image" src = "https://media.w3wiki.net/wp-content/uploads/20200505154108/image30.png" > </ div > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < div class = "ui container" > < h1 >Circular Bordered Image</ h1 > < img class = "ui medium circular bordered image" src = "https://media.w3wiki.net/wp-content/uploads/20200505154108/image30.png" > </ div > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ body > </ html > |
Output:
Example: This example creating a Vertically aligned Images.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < div class = "ui container" > < h1 >Vertically Aligned Images</ h1 > < img class = "ui top aligned small image" src = "https://media.w3wiki.net/wp-content/uploads/20200505154108/image30.png" > < p >Aligned at Top</ p > < div class = "ui divider" ></ div > < img class = "ui middle aligned small image" src = "https://media.w3wiki.net/wp-content/uploads/20200505154108/image30.png" > < p >Aligned at Middle</ p > < div class = "ui divider" ></ div > < img class = "ui bottom aligned small image" src = "https://media.w3wiki.net/wp-content/uploads/20200505154108/image30.png" > < p >Aligned at Bottom</ p > </ div > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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.