Bootstrap4 Formas de imagen
Imágenes redondeadas
.roundedLa clase puede hacer que las imágenes muestren esquinas redondeadas:
Imagen elíptica
.rounded-circleLa clase puede configurar una imagen elíptica:
Miniatura
.img-thumbnailLa clase se usa para configurar la miniatura de la imagen (la imagen tiene un borde):
Alineación de imágenes
Usa.float-rightla clase para alinear la imagen a la derecha, usa.float-leftla clase para alinear la imagen a la izquierda:
Ejemplo
<img src="paris.jpg" class="float-left">
<img src="cinqueterre.jpg" class="float-right">
Pruébalo »
Imagen centrada
Usa.mx-auto (margin:auto)y .d-block (display:block)las clases para centrar la imagen:
Imágenes responsivas
Las imágenes tienen varios tamaños, necesitamos adaptarlas automáticamente según el tamaño de la pantalla.
Podemos, al<img>agregar en la etiqueta.img-fluidla clase para establecer la imagen responsiva.
.img-fluidLa clase establecemax-width: 100%; 、 height: auto; :
Otras extensiones