Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
Hay diferentes estilos de poner imágenes en nuestro sitio web usando semantic-ui que hacen que nuestro sitio web se vea más impresionante. Las variaciones de tamaño de imagen de interfaz de usuario semántica se utilizan para agregar los diferentes tamaños de imágenes a la página web.
Clases de variación de tamaño de imagen de IU semántica:
- mini: Se utiliza para establecer el tamaño de la imagen en mini.
- tiny: se utiliza para establecer el tamaño de la imagen en minúsculo.
- pequeño: se utiliza para establecer el tamaño de la imagen en pequeño.
- medio: Se utiliza para establecer el tamaño de la imagen en medio.
- grande: se utiliza para establecer el tamaño de la imagen en grande.
- grande: se utiliza para establecer el tamaño de la imagen en grande.
- enorme: se utiliza para establecer el tamaño de la imagen en enorme.
- masivo: se utiliza para establecer el tamaño de la imagen en masivo.
Sintaxis:
<img class="ui mini image" src="gfg.png">
Ejemplo 1: en este ejemplo, utilizaremos variaciones de tamaño de imagen de interfaz de usuario semántica para mostrar imágenes en diferentes tamaños.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Size 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 center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Image Size Variations</h3> <img class="ui mini centered image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui tiny centered image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui small centered image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui medium centered image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui large centered image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui big centered image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui huge centered image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui massive centered image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, utilizaremos variaciones de tamaño de imagen de interfaz de usuario semántica con variaciones circulares para mostrar imágenes en diferentes tamaños.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Size 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 center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Image Size Variations</h3> <img class="ui mini centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui tiny centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui small centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui medium centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui large centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui big centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui huge centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <br> <img class="ui massive centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/image.html#size
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA