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. La variación fluida de la imagen de interfaz de usuario semántica se usa para tomar el ancho completo del elemento contenedor.
Clase de variación de fluido de imagen de interfaz de usuario semántica:
- fluido: se utiliza para tomar la imagen en todo el ancho de su elemento contenedor.
Sintaxis:
<img class="ui fluid image" src="gfg.png">
Ejemplo 1: En este ejemplo, utilizaremos Variaciones de fluidos de imagen de interfaz de usuario semántica para mostrar la imagen en todo el ancho de su contenedor.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Fluid 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 Fluid Variations</h3> <img class="ui fluid 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 fluidas de imagen de interfaz de usuario semántica con variaciones circulares para mostrar la imagen en todo el ancho de su contenedor.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Image Fluid 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 Fluid Variations</h3> <img class="ui fluid 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#fluid
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA