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
. max-width: 100%;
e height: auto;
aplícanse á imaxe para que se escala co elemento pai.
<img src="..." class="img-fluid" alt="...">
Imaxes SVG e Internet Explorer
En Internet Explorer 10 e 11, as imaxes SVG .img-fluid
teñen un tamaño desproporcionado. Para solucionar isto, engade width: 100%;
ou .w-100
cando sexa necesario. Esta corrección dimensiona incorrectamente outros formatos de imaxe, polo que Bootstrap non o aplica automaticamente.
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 de nivel -level pódense centrar usando a .mx-auto
clase de utilidade marxe .
<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>
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>