Source

תמונות

תיעוד ודוגמאות לבחירה בתמונות להתנהגות מגיבה (כדי שהן לעולם לא יהפכו לגדולות יותר ממרכיבי האב שלהן) והוסיפו להן סגנונות קלים - הכל באמצעות שיעורים.

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

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

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
תמונות SVG ו-IE 10

ב-Internet Explorer 10, תמונות SVG עם .img-fluidהן בגודל לא פרופורציונלי. כדי לתקן זאת, הוסף width: 100% \9;במידת הצורך. תיקון זה מגדיל באופן שגוי פורמטים אחרים של תמונה, כך ש-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="..." alt="..." class="img-thumbnail">

יישור תמונות

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

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>