Bootstrap 4 صور
Bootstrap 4 أشكال صور
زوايا مدورة:
دائرة:
ظفري:
زوايا مدورة
يضيف الفصل .roundedزوايا مستديرة للصورة:
مثال
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
دائرة
يشكل .rounded-circleالفصل الصورة على شكل دائرة:
مثال
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
ظفري
يشكل .img-thumbnailالفصل الصورة في صورة مصغرة (بحدود):
مثال
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
محاذاة الصور
حرك صورة إلى اليمين مع .float-rightالفصل أو إلى اليسار باستخدام .float-left:
مثال
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
مركز الصورة
قم بتوسيط الصورة عن طريق إضافة فئات المرافق .mx-auto(الهامش: تلقائي) و .d-block(عرض: كتلة) إلى الصورة:
مثال
<img src="paris.jpg" class="mx-auto d-block">
صور مستجيبة
الصور تأتي في جميع الأحجام. وكذلك الشاشات. يتم ضبط الصور المتجاوبة تلقائيًا لتناسب حجم الشاشة.
قم بإنشاء صور متجاوبة عن طريق إضافة .img-fluidفئة إلى <img>العلامة. سيتم بعد ذلك تغيير حجم الصورة بشكل جيد مع العنصر الأصلي.
.img-fluidينطبق الفصل max-width: 100%;والصورة
height: auto;:
مثال
<img class="img-fluid" src="img_chania.jpg" alt="Chania">