Formas de imagen Bootstrap 4

Las formas de imagen que podemos encontrar son las siguientes:

• Esquinas redondeadas
• Círculo
• Miniatura

Y las clases que vamos a encontrar para imagen son las siguientes:

• .rounded
• .rounded-circle
• .img-thumbnail
• Alineando imágenes
  • .float-right
  • .float-left
• Imagen centrada
  • mx-auto
  • d-block
• Imagen Responsive
  • img-fluid

Esquinas redondeadas (Rounded Corners)

La clase .rounded añade esquinas redondeadas a una imagen.

Ejm

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

Círculo (Circle)

La clase .rounded-circle hace que la imagen toma forma redondeada

Ejm

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

Miniatura (Thumbnail)

La clase .img-thumbnail hace la imagen una miniatura (bordeada).

Ejm

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

Alineando imágenes

Flota una imagen a la derecha con la clase .float-right o a la izquierda con .float-left.

Ejm

<img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right">

Imagen centrada

Centra una imagen agregando las clases .mx-auto (margen: auto) y .d-block (display: block) a la imagen.

Ejm

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

Imágenes Responsive

Las imágenes vienen en todos los tamaños. También las pantallas. Las imágenes Responsivese ajustan automáticamente para adaptarse al tamaño de la pantalla.

Crea imágenes Responsive agregando una clase .img-fluid a la etiqueta <img>. La imagen se escalará bien al elemento padre.

La clase .img-fluid aplica max-width: 100%; y altura: auto a la imagen.

Ejm

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