Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene varios elementos diferentes para usar para hacer que su sitio web se vea más increíble. La interfaz de usuario semántica nos proporciona una manera muy fácil de diseñar imágenes. Ofrece imágenes de diferentes tipos como una imagen normal y un enlace de imagen. También nos proporciona diferentes estados como oculto, visible y también en diferentes variaciones y estados.
En este artículo, aprenderemos sobre los tipos de imagen de interfaz de usuario semántica y su implementación mediante un código de ejemplo.
Tipo de imagen de interfaz de usuario semántica:
1. Imagen: se utiliza para insertar una imagen normal en el documento. La imagen normalmente toma la forma del contenedor, pero si se dan dimensiones específicas, la imagen tomará las dimensiones especificadas.
Sintaxis:
<div class="ui small image"> <img src="...."> </div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Types</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui header green">Geeksforgeeks</h2> <strong>Semantic-UI Image Types</strong><br /><br /> <div class="ui small image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" /> </div> </div> </body> </html>
Producción:
Ejemplo 2: Especifiquemos ahora las dimensiones de la imagen en estos ejemplos.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Types</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui header green">Geeksforgeeks</h2> <strong>Semantic-UI Image Types</strong><br /><br /> <div class="ui small image"> <svg width="150" height="150"> <image xlink:href= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" x="0" y="0" width="100%" height="100%"></image> </svg> </div> </div> </body> </html>
Producción:
Ejemplo 3:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Types</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui header green">Geeksforgeeks</h2> <strong>Semantic-UI Image Types</strong><br /><br /> <img class="ui small image" src=" https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png" /> </div> </body> </html>
Producción:
2. Enlace de imagen : si se hace clic en la imagen, será redirigido al sitio que está vinculado. Está formateado de tal manera que se vincula con otro contenido.
Sintaxis:
<a href="...." class="ui medium image"> <img src="....."> </a>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Types</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <h2 class="ui header green">Geeksforgeeks</h2> <strong>Semantic-UI Image Types</strong><br /><br /> <a href="https://geeksforgeeks.org" class="ui medium image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png" /> </a> </div> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/image.html#types
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA