La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
El elemento de interfaz de usuario semántica presenta una gran colección de tipos de datos similares en un sitio web. El elemento puede contener una imagen, encabezado, descripción, botones, fecha, etc. El elemento es la colección de elementos en la interfaz de usuario semántica.
El contenido de imagen de elemento de interfaz de usuario semántica nos permite utilizar imágenes en los elementos. Las imágenes se pueden colocar dentro del contenedor de elementos con la ayuda de esta clase.
Clases de contenido de imagen de elemento de interfaz de usuario semántica:
- imagen: esta clase significa que el contenido dentro del contenedor es una imagen, por lo que se proporciona el relleno necesario y la alineación.
Sintaxis: agregue la clase de imagen al contenedor del elemento de la siguiente manera:
<div class="item">
<div class="ui image">
<img src="..." />
</div>
</div>
Ejemplo: En el siguiente ejemplo, tenemos una lista de elementos que contienen imágenes utilizando la clase de elemento e imagen .
HTML
<!DOCTYPE html> <html> <head> <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"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <center> <h1 class="ui header green"> GeeksforGeeks</h1> <strong> Semantic UI Item Image Content </strong> </center> <div class="ui items"> <div class="item"> <span> Image 1:</span> <div class="ui image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220210163521/logo-200x32.png"/> </div> </div> <div class="item"> <span> Image 2:</span> <div class="ui image "> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220210163607/gfg2-300x67.png"/> </div> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/views/item.html#image
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA