in English

εικόνες

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

Σε αυτήν την σελίδα

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

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

html

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

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

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

html

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

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

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

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

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

Sass

Μεταβλητές

Οι μεταβλητές είναι διαθέσιμες για μικρογραφίες εικόνων.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;