Formas de imagen Bootstrap5

Bootstrap 5 proporciona muchas clases para ayudarte a ajustar y optimizar rápidamente la apariencia de las imágenes, especialmente para controlar la forma, el tamaño y el diseño adaptable de las imágenes.

Imágenes con esquinas redondeadas

.roundedLa clase puede hacer que las imágenes muestren un efecto de esquinas redondeadas:

Ejemplo

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Pruébalo »

Imágenes elípticas

.rounded-circleLa clase puede configurar imágenes elípticas:

Ejemplo

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Pruébalo »

Miniatura

.img-thumbnailLa clase se utiliza para configurar miniaturas de imágenes (las imágenes tienen borde):

Ejemplo

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Pruébalo »

Alineación de imágenes

Usa.float-startla clase para alinear la imagen a la izquierda, usa.float-endla clase para alinear la imagen a la derecha:

Ejemplo

<img src="paris.jpg" class="float-start"> <img src="cinqueterre.jpg" class="float-end">

Pruébalo »

Centrar imagen

Usa.mx-auto (margin:auto)y .d-block (display:block)clases para centrar la imagen:

Ejemplo

<img src="paris.jpg" class="mx-auto d-block">

Pruébalo »

Imágenes responsivas

Las imágenes tienen diferentes tamaños y necesitamos adaptarlas automáticamente al tamaño de la pantalla.

Podemos, al<img>agregar en la etiqueta.img-fluidla clase para configurar imágenes responsivas.

.img-fluidLa clase establecemax-width: 100%; 、 height: auto; :

Ejemplo

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

Pruébalo »
Otras extensiones