Imagens

Documentação e exemplos para tornar imagens responsivas (nunca crescem mais que os elementos pais) e adicionar estilos leves a elas, através de classes.

Imagens responsivas

Imagens no Bootstrap são feitas responsivas com a classe .img-fluid. As declarações max-width: 100%; e height: auto; são aplicadas a imagem, de modo que ela escale junto ao elemento pai.

<img src="..." class="img-fluid" alt="Imagem responsiva">

Imagens SVG e o IE10

No Internet Explorer 10, imagens SVG com .img-fluid são dimensionadas desproporcionalmente. Para consertar isso, adicione width: 100% \9; quando necessário. Isso conserta dimensões impróprias para outros formatos de imagens, então, o Bootstrap não aplica isso automaticamente.

Thumbnails

Além de nossos utilitários border-radius, você pode usar .img-thumbnail para dar uma borda arredondada de 1px a uma imagem.

Uma imagem de um quadrado genérico com uma borda branca ao redor, fazendo ela parecer uma fotografia tirada com uma polaroide antiga.

<img src="..." alt="..." class="img-thumbnail">

Alinhando imagens

Alinhe imagens com as classes utilitárias de float ou classes para alinhamento de texto. Imagens de block-level podem ser centralizadas usando a classe utilitária de margem .mx-auto.

Uma imagem genérica de um quadrado com cantos arredondados.

<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>

Elemento `<picture>`

Se você está usando o elemento <picture> para especificar várias fontes (<source>) para uma imagem específica, se assegure de adicionar as classes .img- para as <img> e não para as tags <picture>.

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