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 hace que nuestro sitio web se vea más impresionante. La variación circular de imagen de interfaz de usuario semántica se utiliza para crear imágenes circulares.
Clase de variación circular de imagen de interfaz de usuario semántica:
- circular: Se utiliza para crear imágenes circulares para las páginas web.
Sintaxis:
<img class="ui medium circular image" src="gfg.png">
Ejemplo 1: En este ejemplo, describiremos la variación circular de imagen de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Circular 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 Circular Variations</h3> <img class="ui centered circular image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, describiremos la variación circular de imagen de interfaz de usuario semántica con variaciones de diferentes tamaños.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Circular 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 Circular 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"> <div style="padding-bottom: 400px;"></div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/image.html#circular
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA