في Tailwind، نسبة العرض إلى الارتفاع هي نسبة عرض العنصر إلى ارتفاعه، مثل مقطع فيديو أو صورة. قدمت Tailwind CSS دعمًا أصليًا للأدوات المساعدة لنسبة العرض إلى الارتفاع، والتي تستخدم خاصية نسبة العرض إلى الارتفاع في CSS لتعيين نسبة العرض إلى الارتفاع المطلوبة لعنصر ما. ومع ذلك، هذه الخاصية غير مدعومة في المتصفحات القديمة. لذلك، يمكن للمستخدمين استخدام البرنامج المساعد لنسبة العرض إلى الارتفاع لدعم هذه المتصفحات. يقدم هذا البرنامج المساعد فئتين، أي ' الجانب-ث-{ن} ' و ' الجانب-ح-{ن} '، والتي يمكن دمجها لإعطاء عنصر نسبة عرض إلى ارتفاع ثابتة.
تشرح هذه المقالة طريقة تعيين المكوّن الإضافي لنسبة العرض إلى الارتفاع في Tailwind.
كيفية تعيين البرنامج المساعد لنسبة العرض إلى الارتفاع في Tailwind CSS؟
لتعيين المكوّن الإضافي لنسبة العرض إلى الارتفاع في Tailwind، انظر إلى الخطوات الموضحة أدناه:
- قم بتثبيت البرنامج المساعد لنسبة العرض إلى الارتفاع في المشروع
- أضف المكوّن الإضافي لنسبة العرض إلى الارتفاع في ملف 'tailwind.config.js' وقم بتعطيل ' وجه 'البرنامج المساعد الأساسي
- استخدم فئات المكونات الإضافية لنسبة العرض إلى الارتفاع في برنامج HTML
- تحقق من الإخراج من خلال عرض صفحة ويب HTML
الخطوة 1: تثبيت البرنامج المساعد لنسبة العرض إلى الارتفاع في مشروع Tailwind
أولاً، افتح الوحدة الطرفية وقم بتنفيذ الأمر المذكور أدناه لتثبيت المكون الإضافي لنسبة العرض إلى الارتفاع في المشروع:
أصل و @ com.tailwindcss / ابعاد متزنة
الخطوة 2: تكوين البرنامج المساعد لنسبة العرض إلى الارتفاع في ملف تكوين Tailwind
بعد ذلك، افتح الملف 'tailwind.config.js'، وأضف إليه المكون الإضافي لنسبة العرض إلى الارتفاع، وقم بتعطيل ' وجه ” البرنامج المساعد الأساسي لتجنب أي تعارضات:
Module.exports = {محتوى: [ './index.html' ] ,
الإضافات الأساسية: {
ابعاد متزنة: خطأ شنيع ,
} ,
الإضافات: [
يتطلب ( '@tailwindcss/نسبة العرض إلى الارتفاع' ) ,
] ,
} ;
الخطوة 3: استخدام البرنامج المساعد لنسبة العرض إلى الارتفاع في برنامج HTML
الآن، قم بإنشاء برنامج HTML واستخدم المكون الإضافي لنسبة العرض إلى الارتفاع فيه. على سبيل المثال، استخدمنا ' الجانب ث-16 ' و ' الجانب ح-9 ”فئات في برنامجنا للحفاظ على نسبة العرض إلى الارتفاع 16:9:
< جسم >< شعبة فصل = 'الجانب-w-16 الجانب-ح-9' >
< com.iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
com.frameborder = '0' يسمح = 'مقياس التسارع؛ التشغيل التلقائي؛
الكتابة في الحافظة؛ الوسائط المشفرة؛ جيروسكوب؛
صور في صور' allowfullscreen >< com.iframe >
شعبة >
جسم >
هنا:
- ال ' <ديف> يستخدم العنصر فئتين إضافيتين لنسبة العرض إلى الارتفاع، أي ' الجانب ث-16 ' و ' الجانب ح-9 '. تُستخدم هذه الفئات لإنشاء حاوية ذات نسبة عرض إلى ارتفاع ثابتة تبلغ 16:9.
- ال '