Source

Imágenes

Documentación y ejemplos para optar por que las imágenes tengan un comportamiento receptivo (para que nunca se vuelvan más grandes que sus elementos principales) y agregarles estilos livianos, todo a través de clases.

Imágenes receptivas

Las imágenes en Bootstrap se hacen responsivas con .img-fluid. max-width: 100%;y height: auto;se aplican a la imagen para que se escale con el elemento principal.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
Imágenes SVG e IE 10

En Internet Explorer 10, las imágenes SVG .img-fluidtienen un tamaño desproporcionado. Para solucionar esto, agregue width: 100% \9;donde sea necesario. Esta solución dimensiona incorrectamente otros formatos de imagen, por lo que Bootstrap no lo aplica automáticamente.

Miniaturas de imágenes

Además de nuestras utilidades de radio de borde , puede usar .img-thumbnailpara dar a una imagen una apariencia de borde redondeado de 1px.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

Alinear imágenes

Alinee las imágenes con las clases flotantes auxiliares o las clases de alineación de texto . blockLas imágenes de nivel se pueden centrar utilizando la .mx-autoclase de utilidad de margen .

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Imagen

Si está utilizando el <picture>elemento para especificar varios <source>elementos para un elemento específico <img>, asegúrese de agregar las .img-*clases a <img>y no a la <picture>etiqueta.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>