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
. Esto se aplica max-width: 100%;
a height: auto;
la imagen para que se escale con el elemento principal.
<img src="..." class="img-fluid" alt="...">
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-start" alt="...">
<img src="..." class="rounded float-end" 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>
Hablar con descaro a
Variables
Las variables están disponibles para las miniaturas de imágenes.
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;