الصور المتجاوبة img-fluid | الصور والأشكال التوضيحية في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تمتلك ملفات الصور النقطية أبعاداً ثابتة بالبكسل؛ فإذا أدرجت صورة بعرض 1200px داخل عمود شبكي عرضه 360px على الهاتف دون قيود، فستفيض الصورة خارج حدود العمود وتكسر التخطيط الأفقي للصفحة بأكملها.

يحل كلاس .img-fluid هذه المشكلة جذرياً بتطبيق قاعدتي max-width: 100% وheight: auto معاً؛ فتتقلص الصورة تناسبياً لتطابق عرض العمود الأب دون أي تشويه في أبعادها، وفي الوقت نفسه لا تتمدد أبداً فوق دقتها الأصلية على الشاشات العريضة.

الصف 2 صورة توضيحية

الشكل 1: منظومة كلاسات الصور المتجاوبة والمحاذاة والأشكال التوضيحية في Bootstrap 5.3.

مخطط آلية عمل الصور المتجاوبة img-fluid ومكوّن الشكل التوضيحي figure في بوتستراب 5

الصف 3 كود برمجي

HTML

<div class="row">
  <div class="col-md-8">
    <img src="/images/examples/workspace-wide.webp"
         class="img-fluid rounded"
         alt="Modern developer desk setup">
  </div>
</div>

جرّب بنفسك

الصف 4 ملاحظة هامة

Responsive img-fluid Class الصور المتجاوبة img-fluid

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الصور والأشكال التوضيحية في بوتستراب 5)