Bootstrap 4 immagini
Bootstrap 4 forme di immagine
Angoli arrotondati:
Cerchio:
Miniatura:
Angoli arrotondati
La .roundedclasse aggiunge angoli arrotondati a un'immagine:
Esempio
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Cerchio
La .rounded-circleclasse modella l'immagine in un cerchio:
Esempio
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Miniatura
La .img-thumbnailclasse modella l'immagine su una miniatura (bordata):
Esempio
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Allineamento delle immagini
Sposta un'immagine a destra con la .float-rightclasse oa sinistra con .float-left:
Esempio
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Immagine centrata
Centrare un'immagine aggiungendo le classi di utilità .mx-auto(margin:auto) e .d-block(display:block) all'immagine:
Esempio
<img src="paris.jpg" class="mx-auto d-block">
Immagini reattive
Le immagini sono disponibili in tutte le dimensioni. Così fanno gli schermi. Le immagini reattive si adattano automaticamente alle dimensioni dello schermo.
Crea immagini reattive aggiungendo una .img-fluidclasse al <img>tag. L'immagine verrà quindi ridimensionata correttamente rispetto all'elemento padre.
La .img-fluidclasse si applica max-width: 100%;e
height: auto;all'immagine:
Esempio
<img class="img-fluid" src="img_chania.jpg" alt="Chania">