Imaxes
Documentación e exemplos para incorporar imaxes a un comportamento receptivo (para que nunca sexan máis grandes que os seus elementos principais) e engadirlles estilos lixeiros, todo a través de clases.
Imaxes sensibles
As imaxes en Bootstrap fanse sensibles con .img-fluid
. Isto aplícase max-width: 100%;
á height: auto;
imaxe para que se escala co elemento pai.
<img src="..." class="img-fluid" alt="...">
Miniaturas de imaxes
Ademais das nosas utilidades de radio de borde , podes usar .img-thumbnail
para darlle a unha imaxe un aspecto de bordo redondeado de 1 px.
<img src="..." class="img-thumbnail" alt="...">
Aliñación de imaxes
Aliñar as imaxes coas clases flotantes auxiliares ou as clases de aliñamento de texto . block
As imaxes -level pódense centrar usando a .mx-auto
clase de utilidade marxe .
<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>
Imaxe
Se estás a usar o <picture>
elemento para especificar varios <source>
elementos para un <img>
, asegúrate de engadir as .img-*
clases á etiqueta <img>
e non á <picture>
etiqueta.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Variables
Hai variables dispoñibles para as miniaturas das imaxes.
$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;