תמונות

תמונות רספונסיביות

תמונות ב-Bootstrap נעשות רספונסיביות עם .img-fluid. זה חל max-width: 100%;ועל height: auto;התמונה כך שהיא תתאים ברוחב האב.

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

תמונות ממוזערות

בנוסף לכלי השירות שלנו ברדיוס הגבול , אתה יכול להשתמש .img-thumbnailכדי לתת לתמונה מראה גבול מעוגל של 1 פיקסלים.

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

יישור תמונות

יישר תמונות עם מחלקות ה- helper float או מחלקות יישור טקסט . blockניתן לרכז תמונות ברמה באמצעות מחלקת .mx-autoהשירות של margin .

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" 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>

סאס

משתנים

משתנים זמינים עבור תמונות ממוזערות.

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