Bootstrap 4 Imágenes
Bootstrap 4 formas de imagen
Esquinas redondeadas:
Circulo:
Miniatura:
Esquinas redondeadas
La .roundedclase agrega esquinas redondeadas a una imagen:
Ejemplo
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Circulo
La .rounded-circleclase da forma a la imagen en un círculo:
Ejemplo
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Miniatura
La .img-thumbnailclase da forma a la imagen en una miniatura (con borde):
Ejemplo
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Alineación de imágenes
Haga flotar una imagen a la derecha con la .float-rightclase o a la izquierda con .float-left:
Ejemplo
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Imagen centrada
Centre una imagen agregando las clases de utilidad .mx-auto(margin:auto) y .d-block(display:block) a la imagen:
Ejemplo
<img src="paris.jpg" class="mx-auto d-block">
Imágenes receptivas
Las imágenes vienen en todos los tamaños. También las pantallas. Las imágenes receptivas se ajustan automáticamente para adaptarse al tamaño de la pantalla.
Cree imágenes receptivas agregando una .img-fluidclase a la <img>etiqueta. La imagen se escalará muy bien al elemento principal.
La .img-fluidclase se aplica max-width: 100%;y
height: auto;a la imagen:
Ejemplo
<img class="img-fluid" src="img_chania.jpg" alt="Chania">