Source

εικόνες

Τεκμηρίωση και παραδείγματα για την επιλογή των εικόνων σε συμπεριφορά απόκρισης (ώστε να μην γίνονται ποτέ μεγαλύτερα από τα μητρικά τους στοιχεία) και να προσθέσετε ελαφριά στυλ σε αυτά — όλα μέσω κλάσεων.

Αποκριτικές εικόνες

Οι εικόνες στο Bootstrap αποκρίνονται με .img-fluid. max-width: 100%;και height: auto;εφαρμόζονται στην εικόνα έτσι ώστε να κλιμακώνεται με το γονικό στοιχείο.

<img src="..." class="img-fluid" alt="Responsive image">

Εικόνες SVG και IE 10

Στον Internet Explorer 10, οι εικόνες SVG με .img-fluidέχουν δυσανάλογο μέγεθος. Για να το διορθώσετε, προσθέστε width: 100% \9;όπου χρειάζεται. Αυτή η επιδιόρθωση μετράει εσφαλμένα μεγέθη άλλων μορφών εικόνας, επομένως το Bootstrap δεν την εφαρμόζει αυτόματα.

Μικρογραφίες εικόνων

Εκτός από τα βοηθητικά προγράμματα ακτίνας περιγράμματος , μπορείτε να τα χρησιμοποιήσετε .img-thumbnailγια να δώσετε σε μια εικόνα στρογγυλεμένη εμφάνιση περιγράμματος 1 εικονοστοιχείο.

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

Ευθυγράμμιση εικόνων

Ευθυγραμμίστε τις εικόνες με τις βοηθητικές κλάσεις float ή τις κλάσεις στοίχισης κειμένου . blockΟι εικόνες επιπέδου μπορούν να κεντραριστούν χρησιμοποιώντας την .mx-autoκλάση βοηθητικού προγράμματος περιθωρίου .

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

Εικόνα

Εάν χρησιμοποιείτε το <picture>στοιχείο για να καθορίσετε πολλά <source>στοιχεία για ένα συγκεκριμένο <img>, φροντίστε να προσθέσετε τις .img-*κλάσεις στο <img>και όχι στην <picture>ετικέτα.

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