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.
<img src="..." class="img-fluid" alt="...">
Imágenes SVG e Internet Explorer
En Internet Explorer 10 y 11, las imágenes SVG .img-fluid
tienen un tamaño desproporcionado. Para solucionar esto, agregue width: 100%;
o .w-100
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-thumbnail
para dar a una imagen una apariencia de borde redondeado de 1px.
<img src="..." class="img-thumbnail" alt="...">
Alinear imágenes
Alinee las imágenes con las clases flotantes auxiliares o las clases de alineación de texto . block
Las imágenes de nivel se pueden centrar utilizando la .mx-auto
clase de utilidad de margen .
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<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>