תמונות
תיעוד ודוגמאות לבחירה בתמונות להתנהגות מגיבה (כדי שהן לעולם לא יהפכו לגדולות יותר ממרכיבי האב שלהן) והוסיפו להן סגנונות קלים - הכל באמצעות שיעורים.
תמונות רספונסיביות
תמונות ב-Bootstrap נעשות רספונסיביות עם .img-fluid
. max-width: 100%;
ומוחלים height: auto;
על התמונה כך שתתרחב עם אלמנט האב.
<img src="..." class="img-fluid" alt="...">
תמונות SVG ו-Internet Explorer
ב-Internet Explorer 10 ו-11, תמונות SVG עם .img-fluid
הן בגודל לא פרופורציונלי. כדי לתקן זאת, הוסף width: 100%;
או .w-100
היכן שצריך. תיקון זה מגדיל באופן שגוי פורמטים אחרים של תמונה, כך ש-Bootstrap לא מחיל אותו באופן אוטומטי.
תמונות ממוזערות
בנוסף לכלי השירות שלנו ברדיוס הגבול , אתה יכול להשתמש .img-thumbnail
כדי לתת לתמונה מראה גבול מעוגל של 1 פיקסלים.
<img src="..." class="img-thumbnail" alt="...">
יישור תמונות
יישר תמונות עם מחלקות ה- helper float או מחלקות יישור טקסט . block
ניתן לרכז תמונות ברמה באמצעות מחלקת .mx-auto
השירות של margin .
<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>