Εικόνες στο Bootstrap 5

Προτεινόμενα μαθήματα:

Σχήμα εικόνας

Γωνίες .rounded

Παράδειγμα

Η κλάση θα προσθέσει γωνίες στην εικόνα:

Δοκιμάστε το προσωπικά

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

Κύκλος .rounded-circle

Παράδειγμα

Η κλάση θα δημιουργήσει την εικόνα σε μορφή κύκλου:

Δοκιμάστε το προσωπικά

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

Miniature .img-thumbnail

Παράδειγμα

Η κλάση θα δημιουργήσει την εικόνα σε μορφή εικόνας miniature (με περιθώριο):

Δοκιμάστε το προσωπικά

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

Για να ρυθμίσετε την εικόνα .float-start Η κλάση θα κινήσει την εικόνα προς τα αριστερά, ή χρησιμοποιήστε .float-end Προς τα δεξιά κύμα:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Κεντρική εικόνα

Για να τοποθετήσουμε το εικόνα στο κέντρο, προσθέσαμε την κλάση utility .mx-auto (margin:auto) και .d-block (display:block)：

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Εύκολο στοιχείο εικόνας

Οι εικόνες έχουν διάφορες διαστάσεις. Και ο οθόνη είναι το ίδιο. Οι εύκολοι στοιχείο εικόνας προσαρμόζονται αυτόματα για να ταιριάζουν με το μέγεθος της οθόνης.

Με τον τρόπο που .img-fluid Προσθέστε την κλάση <img> Χρησιμοποιήστε την ετικέτα για να δημιουργήσετε εύκολο στοιχείο εικόνας. Στη συνέχεια, η εικόνα θα προσαρμοστεί καλά μέσα στο στοιχείο του γονέα.

.img-fluid Η κλάση για την εφαρμογή εικόνων max-width: 100%; και height: auto; ：

Παράδειγμα

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

Δοκιμάστε το προσωπικά