Clases de imagen en Bootstrap 5 | Explicado
Configurando imágenes en bootstrap 5
Con el fin de diseñar sus imágenes al proporcionarles alguna forma, hay varias clases disponibles en Bootstrap 5. Estas clases junto con sus manifestaciones se han discutido en esta sección.
.redondeado
Para redondear las esquinas de la imagen, use el .redondeado clase. Para hacerlo, simplemente tienes que incluir esta clase en la etiqueta.
Html
Sabemos que Bootstrap funciona con elementos de envoltura dentro de un contenedor, por lo tanto, hemos creado un contenedor DIV en el código de arriba y anidados una imagen dentro de él. La imagen ha sido asignada la clase redondeada junto con algún ancho y altura.
Producción
La salida de arriba muestra una imagen con esquinas redondeadas.
.círculo redondeado
Como su nombre indica, la clase en discusión en esta sección hace que una imagen sea un círculo. A continuación hemos mostrado su demostración.
Html
Para hacer de la imagen un círculo, hemos asignado la clase de círculo redondeado a la imagen.
Producción
La imagen se convirtió en un círculo con éxito.
.img-mughnail
Las miniaturas juegan un papel vital al diseñar un sitio web que muestre múltiples imágenes en una sola página web. En Bootstrap 5, para convertir las imágenes en una miniatura del .img-mughnail Se usa la clase.
Html
Para hacer que nuestra imagen aparezca como miniatura, la hemos asignado el .Clase IMG-Thumbnail. Esta clase básicamente hace una miniatura con un borde.
Producción
Se creó una miniatura con éxito.
Alinear imágenes en Bootstrap 5
Además de dar forma a las imágenes, alinearlas en la posición correcta también es muy significativa. Esta sección discute múltiples clases que lo ayudan a alinear imágenes en Bootstrap 5.
.estrecho de flotador
Esta clase posiciona una imagen al comienzo del contenedor.
Html
Aquí, en primer lugar, hemos creado un contenedor y hemos colocado una imagen dentro de él. Para colocar esa imagen al comienzo del contenedor, la estamos asignando el .clase de inicio flotante y algo de ancho y altura.
Producción
La imagen se ha colocado al comienzo del contenedor.
.fin de flotador
Con el fin de colocar una imagen al final del contenedor, esta clase se usa.
Html
En el código anterior, para colocar la imagen al final del contenedor, le hemos dado la etiqueta el .clase de extremo flotante.
Producción
La imagen se colocó correctamente al final del contenedor.
.MX-Auto .D-BLOCK
Estas clases se utilizan para centrar una imagen dentro de un contenedor. El .MX-Auto la clase ajusta el margen a la auto y el .D-BLOCK La clase muestra una imagen como bloque. Así es como se usan estas clases.
Html
Con el propósito de centrar una imagen el .mx-auto y .Se asignaron clases de bloque D a la imagen en el fragmento de código arriba.
Producción
La imagen ha sido centrada.
Imágenes receptivas en Bootstrap 5
Con el propósito de hacer que las imágenes respondan que alteren su comportamiento dependiendo del ancho del dispositivo, use la clase mencionada a continuación proporcionada por Bootstrap 5.
.img-fluido
El .La clase img-fluid hace que una imagen altere su tamaño de acuerdo con el tamaño de la pantalla. La imagen que usa esta clase cambiará su tamaño en correspondencia al elemento principal, además, esta clase ajusta el ancho máximo de la imagen al 100% y la altura a automáticamente.
Html
En el código anterior, estamos asignando la clase img-fluid a la imagen. Para ver el efecto de esta clase escala la ventana de su navegador hacia arriba y hacia abajo.
Producción
Cuando el ancho de la pantalla es 680px y arriba.
En el ancho de la pantalla 400px y abajo.
La imagen se hizo receptiva con éxito.
Conclusión
Las clases de imagen en Bootstrap 5 le permiten diseñar las imágenes que aparecen en su sitio web. Usando estas clases puede darles a las imágenes una determinada forma, alineación, o también puede hacerlas receptivas. Algunas de las clases de imagen de Bootstrap 5 son .redondeado, .img-fluido, .olor flotante, etc. Estas clases se discuten en detalle, elaborando el propósito que sirven.