الصور التكيفية أو الصور المستجيبة هي مجموعة من الأساليب لتحميل الصور المناسبة بناءً على حجم الشاشة أو الجهاز. يتم تعديل الصور التكيفية تلقائيًا وفقًا لأحجام الشاشات والأجهزة المختلفة. تتطلب الصور التكيفية إنشاء تخطيط مختلف لكل جهاز سيتم الوصول إلى صفحة الويب عليه. يمكن إنشاء الصور التكيفية باستخدام CSS Flexbox بسهولة. Flexbox هو نموذج أحادي البعد لتخطيط CSS يقوم بإنشاء صفوف أو أعمدة. يعمل Flexbox على تسهيل إنشاء بنية سريعة الاستجابة.
سيوفر هذا المنشور إرشادات لإنشاء صور قابلة للتكيف باستخدام CSS Flexbox.
كيفية إنشاء صور متكيفة باستخدام CSS Flexbox؟
لإنشاء صور قابلة للتكيف باستخدام CSS Flexbox، يحتاج المستخدمون أولاً إلى إنشاء بنية HTML ثم تطبيق CSS. للحصول على عرض عملي، اتبع الإجراءات الواردة أدناه.
إنشاء هيكل HTML
إنشاء <ديف> وتعيين ' فصل 'اسم إلى' حاوية الصور '. ثم أضف الصورتين داخل
< شعبة فصل = 'حاوية الصور' >
< img src = 'صورة-1.jpg' كل شئ = 'الصورة الأولى' >
< img src = 'صورة-2.jpg' كل شئ = 'الصورة الثانية' >
شعبة >
تطبيق CSS
أولاً، قم بإنشاء Flexbox عن طريق ضبط ' عرض 'قيمة العقار إلى' ثني ' داخل ' حاوية الصورة ' <ديف> . بعد ذلك، اسمح للصور بالالتفاف إلى السطر التالي عند الحاجة عن طريق ضبط ' التفاف المرن 'قيمة العقار إلى' طَوّق '.
بعد ذلك، قم بتطبيق CSS على الصور عن طريق تحديد ' img ' جنبا إلى جنب مع ' .images-container ' اسم. أولاً قم بتعيين ' ثني 'قيمة العقار إلى' 1 ” من أجل توزيع المساحة الحرة المتوفرة بين الصور بالتساوي. ثم قم بتعيين ' أقصى عرض 'قيمة العقار إلى' 100% ' للتأكد من أن الصور لا تتجاوز عرضها الأصلي. تعيين ' ارتفاع 'قيمة العقار إلى' آلي 'للحفاظ على نسبة العرض إلى الارتفاع. وأخيرًا، أضف مسافات بين الصور عن طريق ضبط ' هامِش 'قيمة العقار إلى' 10 بكسل ':
.images-container {عرض: ثني ;
التفاف المرن: التفاف؛
}
.images-container img {
ثني: 1 ;
أقصى عرض: 100 % ;
الارتفاع: تلقائي؛
الهامش: 10 بكسل؛
}
قبل التفاف
تم إنشاء الصور التكيفية باستخدام CSS Flexbox بنجاح. عرض الإخراج أدناه هو قبل التفاف نافذة المتصفح:
بعد التفاف
الآن، لنقم بلف نافذة المتصفح للتحقق مما إذا كانت الصورة قابلة للتكيف أم لا:
الصورة أعلاه تؤكد أن الصور المضافة قابلة للتكيف.
خاتمة
لإنشاء صور قابلة للتكيف باستخدام CSS Flexbox، يحتاج المستخدم أولاً إلى إنشاء بنية HTML، ثم تحديد <ديف> ضع علامة ووضع الصور بداخلها باستخدام بطاقة شعار. ثم قم بتطبيق CSS، وداخل CSS اضبط خاصية 'العرض' على ' ثني 'من أجل إنشاء Flexbox. لقد أظهرت هذه المقالة الدليل الشامل لإنشاء صور قابلة للتكيف باستخدام CSS Flexbox.