Bootstrap 5 Immagini
- Pagina precedente BS5 Tabelle
- Pagina successiva BS5 Jumbotron
Recomandazioni di corso:
Forma immagine
Arrotondamenti .rounded
Esempio
La classe aggiunge arrotondamenti alle immagini:
<img src="flower.jpg" class="rounded" alt="Flower">
Circolare .rounded-circle
Esempio
La classe forma l'immagine in forma circolare:
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
Miniature .img-thumbnail
Esempio
La classe forma l'immagine in miniature (con bordi):
<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">
Allineamento immagine .float-start La classe fa fluttuare l'immagine a sinistra, o usa .float-end Flottante a destra：
Esempio
<img src="tulip.jpg" class="float-start"> <img src="tulip.jpg" class="float-end">
Immagine centrata
Per centrare l'immagine, aggiungiamo la classe utility all'immagine .mx-auto (margin:auto) e .d-block (display:block)：
Esempio
<img src="tulip.jpg" class="mx-auto d-block">
Immagini responsive
Le immagini hanno diverse dimensioni. Anche lo schermo è così. Le immagini responsive si adatteranno automaticamente alle dimensioni dello schermo.
Tramite .img-fluid Aggiungi la classe a <img> Usa il tag per creare immagini responsive. Poi l'immagine si adatterà bene all'elemento genitore.
.img-fluid Aggiungi la classe per l'immagine applicata max-width: 100%; e height: auto; ：
Esempio
<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">
- Pagina precedente BS5 Tabelle
- Pagina successiva BS5 Jumbotron
