Tailwind میں، پہلو کا تناسب کسی عنصر کی چوڑائی اور اونچائی کا تناسب ہے، جیسے کہ ویڈیو یا تصویر۔ Tailwind CSS نے پہلو تناسب کی افادیت کے لیے مقامی تعاون متعارف کرایا، جو کسی عنصر کے لیے مطلوبہ پہلو تناسب سیٹ کرنے کے لیے CSS پہلو تناسب کی خاصیت کا استعمال کرتی ہے۔ تاہم، یہ پراپرٹی پرانے براؤزرز میں تعاون یافتہ نہیں ہے۔ لہذا، صارفین ان براؤزرز کو سپورٹ کرنے کے لیے پہلو تناسب پلگ ان استعمال کر سکتے ہیں۔ یہ پلگ ان دو کلاسوں کو متعارف کراتی ہے یعنی ' aspect-w-{n} 'اور' پہلو-h-{n} ”، جسے ایک عنصر کو ایک مقررہ پہلو تناسب دینے کے لیے ملایا جا سکتا ہے۔
یہ مضمون Tailwind میں اسپیکٹ ریشو پلگ ان سیٹ کرنے کے طریقہ کی وضاحت کرے گا۔
Tailwind CSS میں Aspect Ratio پلگ ان کیسے سیٹ کریں؟
Tailwind میں پہلو کا تناسب پلگ ان سیٹ کرنے کے لیے، ذیل میں فراہم کردہ مراحل کو دیکھیں:
- پروجیکٹ میں پہلو تناسب پلگ ان انسٹال کریں۔
- 'tailwind.config.js' فائل میں پہلو تناسب پلگ ان شامل کریں اور 'غیر فعال کریں پہلو 'بنیادی پلگ ان
- HTML پروگرام میں اسپیکٹ ریشو پلگ ان کلاسز کا استعمال کریں۔
- HTML ویب صفحہ دیکھ کر آؤٹ پٹ کی تصدیق کریں۔
مرحلہ 1: Tailwind پروجیکٹ میں Aspect Ratio پلگ ان انسٹال کریں۔
سب سے پہلے، ٹرمینل کو کھولیں اور پروجیکٹ میں پہلو تناسب پلگ ان کو انسٹال کرنے کے لیے نیچے دی گئی کمانڈ پر عمل کریں:
asl اور @ tailwindcss / پہلو کا تناسب
مرحلہ 2: Tailwind Config فائل میں Aspect Ratio پلگ ان کو کنفیگر کریں۔
پھر، 'tailwind.config.js' فائل کو کھولیں، اس میں اسپیکٹ ریشو پلگ ان شامل کریں، اور ' پہلو کسی بھی تنازعات سے بچنے کے لیے بنیادی پلگ ان:
module.exports = {مواد: [ './index.html' ] ،
corePlugins: {
پہلو کا تناسب: جھوٹا ،
} ،
پلگ ان: [
ضرورت ہے ( '@tailwindcss/aspect-ratio' ) ،
] ،
} ;
مرحلہ 3: HTML پروگرام میں اسپیکٹ ریشو پلگ ان کا استعمال کریں۔
اب، ایک HTML پروگرام بنائیں اور اس میں اسپیکٹ ریشو پلگ ان کو استعمال کریں۔ مثال کے طور پر، ہم نے استعمال کیا ہے ' aspect-w-16 'اور' aspect-h-9 16:9 پہلو تناسب کو برقرار رکھنے کے لیے ہمارے پروگرام میں کلاسز:
< جسم >< div کلاس = 'aspect-w-16 asspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
فریم بارڈر = '0' اجازت دیں = ایکسلرومیٹر؛ آٹو پلے؛
کلپ بورڈ لکھنا؛ انکرپٹڈ میڈیا؛ جائروسکوپ
تصویر میں تصویر' اجازت یافتہ اسکرین >> iframe >
div >
جسم >
یہاں:
- ' ' عنصر دو پہلو تناسب پلگ ان کلاسز کا استعمال کر رہا ہے، یعنی ' aspect-w-16 'اور' aspect-h-9 ' ان کلاسوں کو 16:9 کے فکسڈ اسپیکٹ ریشو کے ساتھ کنٹینر بنانے کے لیے استعمال کیا جاتا ہے۔
- '