in English

εικόνες

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

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

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

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">
Εικόνες SVG και Internet Explorer

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

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

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

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

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

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

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<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>