الصور
وثائق وأمثلة لاختيار الصور في سلوك متجاوب (بحيث لا تصبح أبدًا أكبر من عناصرها الأصلية) وإضافة أنماط خفيفة إليها - كل ذلك عبر الفصول الدراسية.
يتم جعل الصور في Bootstrap تستجيب مع .img-fluid
. max-width: 100%;
ويتم height: auto;
تطبيقها على الصورة بحيث تتناسب مع العنصر الأصلي.
صور SVG و IE 10
في Internet Explorer 10 ، تكون صور SVG ذات .img-fluid
حجم غير متناسب. لإصلاح هذا ، أضف width: 100% \9;
عند الضرورة. يؤدي هذا الإصلاح إلى تغيير أحجام تنسيقات الصور الأخرى بشكل غير صحيح ، لذلك لا يقوم Bootstrap بتطبيقه تلقائيًا.
بالإضافة إلى الأدوات المساعدة الخاصة بنصف قطر الحدود ، يمكنك استخدامها .img-thumbnail
لإعطاء صورة مظهر حدود دائري بمقدار 1 بكسل.
محاذاة الصور مع الفئات العائمة المساعدة أو فئات محاذاة النص . block
يمكن توسيط الصور ذات المستوى باستخدام فئة .mx-auto
أداة الهامش .
إذا كنت تستخدم <picture>
العنصر لتحديد <source>
عناصر متعددة لعنصر معين <img>
، فتأكد من إضافة .img-*
الفئات إلى <img>
وليس إلى <picture>
العلامة.