Tailwind-এ, আকৃতির অনুপাত হল একটি উপাদানের প্রস্থ থেকে উচ্চতার অনুপাত, যেমন একটি ভিডিও বা একটি চিত্র। Tailwind CSS আকৃতি-অনুপাত ইউটিলিটিগুলির জন্য নেটিভ সমর্থন চালু করেছে, যা একটি উপাদানের জন্য পছন্দসই আকৃতির অনুপাত সেট করতে CSS আকৃতি-অনুপাত বৈশিষ্ট্য ব্যবহার করে। যাইহোক, এই সম্পত্তি পুরানো ব্রাউজারে সমর্থিত নয়। অতএব, ব্যবহারকারীরা এই ব্রাউজারগুলিকে সমর্থন করার জন্য দৃষ্টিভঙ্গি অনুপাত প্লাগইন ব্যবহার করতে পারেন। এই প্লাগইন দুটি শ্রেণী প্রবর্তন করে যেমন, “ দৃষ্টিভঙ্গি-w-{n} ' এবং ' দৃষ্টিভঙ্গি-h-{n} ”, যা একটি উপাদানকে একটি নির্দিষ্ট আকৃতির অনুপাত দিতে একত্রিত করা যেতে পারে।
এই নিবন্ধটি Tailwind-এ অ্যাসপেক্ট রেশিও প্লাগইন সেট করার পদ্ধতি ব্যাখ্যা করবে।
Tailwind CSS-এ অ্যাসপেক্ট রেশিও প্লাগইন কিভাবে সেট করবেন?
Tailwind-এ অ্যাসপেক্ট রেশিও প্লাগইন সেট করতে, নিচে দেওয়া ধাপগুলি দেখুন:
- প্রজেক্টে অ্যাসপেক্ট রেশিও প্লাগইন ইন্সটল করুন
- “tailwind.config.js” ফাইলে অ্যাসপেক্ট রেশিও প্লাগইন যোগ করুন এবং “অক্ষম করুন দৃষ্টিভঙ্গি ' মূল প্লাগইন
- HTML প্রোগ্রামে অ্যাসপেক্ট রেশিও প্লাগইন ক্লাস ব্যবহার করুন
- HTML ওয়েব পেজ দেখে আউটপুট যাচাই করুন
ধাপ 1: Tailwind প্রজেক্টে অ্যাসপেক্ট রেশিও প্লাগইন ইনস্টল করুন
প্রথমে, টার্মিনাল খুলুন এবং প্রজেক্টে অ্যাসপেক্ট রেশিও প্লাগইন ইন্সটল করতে নিচের কমান্ডটি চালান:
asl এবং @ tailwindcss / আনুমানিক অনুপাত
ধাপ 2: Tailwind Config ফাইলে অ্যাসপেক্ট রেশিও প্লাগইন কনফিগার করুন
তারপর, 'tailwind.config.js' ফাইলটি খুলুন, এতে আকৃতির অনুপাত প্লাগইন যোগ করুন এবং 'অক্ষম করুন' দৃষ্টিভঙ্গি কোন দ্বন্দ্ব এড়াতে মূল প্লাগইন:
module.exports = {বিষয়বস্তু: [ './index.html' ] ,
corePlugins: {
আনুমানিক অনুপাত: মিথ্যা ,
} ,
প্লাগইন: [
প্রয়োজন ( '@tailwindcss/আসপেক্ট-অনুপাত' ) ,
] ,
} ;
ধাপ 3: HTML প্রোগ্রামে অ্যাসপেক্ট রেশিও প্লাগইন ব্যবহার করুন
এখন, একটি এইচটিএমএল প্রোগ্রাম তৈরি করুন এবং এতে অ্যাসপেক্ট রেশিও প্লাগইন ব্যবহার করুন। উদাহরণস্বরূপ, আমরা ব্যবহার করেছি ' aspect-w-16 ' এবং ' aspect-h-9 16:9 অনুপাত বজায় রাখার জন্য আমাদের প্রোগ্রামে ক্লাস:
< শরীর >< div ক্লাস = 'আসপেক্ট-w-16 অ্যাস্পেক্ট-এইচ-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
ফ্রেম সীমানা = '0' অনুমতি = 'অ্যাক্সিলোমিটার; অটোপ্লে;
ক্লিপবোর্ড-লেখা; এনক্রিপ্টেড মিডিয়া; জাইরোস্কোপ;
ছবিতে ছবিতে' অনুমোদিত পর্দা >> iframe >
div >
শরীর >
এখানে:
- দ্য ' 'এলিমেন্ট দুটি অ্যাসপেক্ট রেশিও প্লাগইন ক্লাস ব্যবহার করছে যেমন, ' aspect-w-16 ' এবং ' aspect-h-9 ” এই ক্লাসগুলি 16:9 এর একটি নির্দিষ্ট অনুপাতের সাথে একটি ধারক তৈরি করতে ব্যবহার করা হয়।
- দ্য '