Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
Las imágenes son la parte esencial del sitio web que ayuda en varias cosas como marketing, etc. El componente de la imagen se duplica como una imagen de marcador de posición si no se proporciona una fuente específica. Las imágenes también se cargan lentamente una vez que aparecen. En este artículo, veremos las imágenes de la interfaz de usuario de Blaze.
Clase de imágenes de la interfaz de usuario de Blaze:
- o-image: Esta clase se utiliza para agregar las imágenes a la página web.
Sintaxis:
<img alt="alternate text" class="o-image" src="http://" />
Ejemplo 1: el siguiente ejemplo muestra el objeto de imagen en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <div class="o-container o-container--xlarge"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Blaze UI Images</h2> <img alt="random placeholder image" class="o-image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" style="width:300px;" /> </div> </body> </html>
Producción:
Ejemplo 2: otro ejemplo que demuestra el objeto de imagen en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <div class="o-container o-container--xlarge"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Blaze UI Images</h2> <img alt="random placeholder image" class="o-image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" style="width:300px; border-radius:150px;" /> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/objects/images
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA