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 grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es “imagen”. Las imágenes se utilizan para varios propósitos en una página web. Se utiliza para ampliar datos particulares de su sitio web. El usuario puede necesitar mostrar diferentes imágenes en diferentes variaciones según sus requisitos. Para representar el significado de los datos de una imagen, su variación puede variar.
Variaciones de la imagen de la interfaz de usuario semántica:
- Avatar : esta variación se utiliza para mostrar una imagen en línea con el contenido.
- Bordeado : esta variación se utiliza para dar un borde a la imagen.
- Fluido : esta variación se utiliza para que la imagen tome el tamaño completo de su contenedor.
- Circular : esta variación se utiliza para hacer que la imagen sea circular.
- Redondeado : esta variación se utiliza para redondear la imagen.
- Alineado verticalmente : esta variación se utiliza para colocar la imagen en la parte superior, media o inferior.
- Centrado : esta variación se utiliza para centrar la imagen.
- Espaciado : esta variación se utiliza para dar espacio adicional a la imagen.
- Flotante : esta variación se usa para hacer que la imagen flote a la izquierda o a la derecha del contenido.
- Tamaño : esta variación se utiliza para hacer que las imágenes varíen de tamaño.
Sintaxis:
<img class="ui image-Variation image" src="gfg.png">
Los siguientes ejemplos ilustran todas las variaciones de imagen.
Ejemplo 1: El siguiente ejemplo demuestra muchas clases de variaciones de imagen.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Variations</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI images Variations</p> </b> <hr><br/> <span>Avatar & Circular image : </span> <img class="ui avatar tiny circular image" style="margin-right:10px" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'> <span>Rounded image : </span> <img class="ui tiny rounded image" style="display:inline;margin-right:10px" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'> <span>Bordered image : </span> <img class="ui tiny bordered image" style="display:inline;" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> <br/> <p>Centered image : </p> <div class="ui segment"> <img class="ui tiny centered image" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'><br /> <p>As the placement season is back, GeeksforGeeks is here to help you crack the interview. We have selected some most commonly asked and MUST DO practice problems to crack Product-based Company Interviews. You can also take part in our mock placement contests which will help you learn different topics and practice at the same time, simulating the feeling of a real placement test environment. </p> </div> <img class="ui top aligned tiny image" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'> <span>Vertically Top Aligned</span> <br /> <span>Spaced image: As the placement season is back, <img class="ui mini spaced image" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'> is here to help you crack the interview. </span> <br /> <span>Floated image: </span> <div class="ui segment" style="padding-bottom:30px"> <img class="ui small left floated image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. We have selected some most commonly asked and MUST DO practice problems to crack Product-based Company Interviews. You can also take part in our mock placement contests which will help you learn different topics and practice at the same time, simulating the feeling of a real placement test environment. </p> </div> <br /> <span>Image Sizes: </span> <div class="ui images"> <img class="ui mini image" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'> <img class="ui tiny image" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'> <img class="ui small image" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'> </div> </div> </body> </html>
Producción:
Variaciones de imagenVariaciones de imagen de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo muestra las clases fluid , bordered y circular para imágenes.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Variations</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body style="width:400px;height:400px;margin:100px;"> <div class="ui container"> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI images Variations</p> </b> <hr><br /> <span>Fluid, Bordered and Circular image : </span> <br /><br /> <img class="ui bordered fluid circular image" style="margin-right:10px" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> </div> </body> </html>
Producción:
Variaciones de imagen de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/image.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA