Imagens Bootstrap 5

Cursos optativos

Recomendação de curso:

Forma da imagem .rounded

Exemplo

Classe adiciona arredondamentos à imagem:

Experimente pessoalmente

<img src="flower.jpg" class="rounded" alt="Flor">

Círculo .rounded-circle

Exemplo

Classe molda a imagem em círculo:

Experimente pessoalmente

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

Miniatura .img-thumbnail

Exemplo

Classe molda a imagem em miniatura (com borda):

Experimente pessoalmente

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

Alinhar imagens .float-start Classe flutua a imagem para a esquerda, ou usar .float-end Flutuar para a direita：

Exemplo

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

Experimente pessoalmente

Imagem centralizada

Para centralizar a imagem, adicionamos a classe utility à imagem. .mx-auto (margin:auto) e .d-block (display:block)：

Exemplo

<img src="tulip.jpg" class="mx-auto d-block">

Experimente pessoalmente

Imagens responsivas

As imagens têm várias dimensões. A tela também. As imagens responsivas se ajustarão automaticamente para se adequar ao tamanho da tela.

Através de .img-fluid Adicionar classe <img> Usar a tag para criar imagens responsivas. Em seguida, a imagem se ajustará bem ao elemento pai.

.img-fluid Classe aplicada para imagens max-width: 100%; e height: auto; ：

Exemplo

<img class="img-fluid" src="tiyugongyuan.jpg" alt="Nova York">

Experimente pessoalmente