Bootstrap/images

تعرَّف على كيفيّة تحسين الصوّر في إطار العمل Bootstrap ليكون سلوكها متجاوبًا (وبالتالي لا تصير الصّورة أبدًا أعرض من العنصُر الأب) وكيفيّة إضافة تنسيقات خفيفة عليها؛ كلّ ذلك باستخدام الأصناف.

الحصول على صوّر متجاوبة

يُتحصَّل على صور متجاوبة في إطار العمل Bootstrap بالصّنف ‎.img-fluid. تُطبَّق القيمتان ‎max-width: 100%;‎ و height: auto‎‎‎;‎ على الصورة لتتمدّد مع العنصُر الأب.

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

صوّر SVG على متصفّح Internet Explorer 10

تظهر صور SVG التي يُطبَّق عليها الصنف ‎.img-fluid بقياسات غير متناسبة على Internet Explorer 10. أضف القيمة‎width: 100% \9;‎ عند الاقتضاء لمعالجة هذا المشكل. يؤدّي هذا الترقيع إلى وضع قياسات غير صحيحة على صيغ الصّوّر الأخرى؛ لذا فإن Bootstrap لا يُطبّقه تلقائيًّا.

الصّوّر المُصغَّرة

يمكن استخدام الصّنف ‎.img-thumbnail لإعطاء صورة إطارًا مُدوَّرًا عند الحوافّ بمقدار 1px؛ كما يمكن الحصول على نفس النتيجة باستخدام أدوات الإطارات.

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

محاذاة الصوّر

استخدم الأصناف المساعدة على التعويم Float أو أصناف محاذاة النّصوص لمحاذاة الصوّر. يمكن توسيط الصوّر على المستوى الكتلي باستخدام الصنف ‎.mx-auto من أدوات التباعد.

• التعويم إلى اليسار أو اليمين

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

تأكّد عند استخدام العنصُر <picture> لتحديد مصادر <source> عدّة لصورة (<img>) مخصوصة، تأكّد من إضافة الأصناف ‎‎.img-‎*‎ إلى العنصُر <img> وليس إلى العنصر <picture>.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

مصادر

• صفحة Images في توثيق Bootstrap.