একাধিক স্লট প্রস্থ নির্দিষ্ট করা

Katie Hempenius

এই ডেমো চেষ্টা করে দেখুন

• সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .

• ব্রাউজারটি বিভিন্ন চিত্র লোড করতে এবং বিভিন্ন ব্রাউজার আকারে বিভিন্ন লেআউট ব্যবহার করতে বিভিন্ন আকারের ব্রাউজার উইন্ডোতে অ্যাপটি পুনরায় লোড করুন।

কোডটি দেখুন

• এই কাজ করে এমন কোডের জন্য index.html চেকআউট করুন:

<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

এখানে কি হচ্ছে?

sizes অ্যাট্রিবিউটের মান নির্দেশ করে যে চিত্র প্রদর্শনের প্রস্থ হবে: 480px চওড়া পর্যন্ত ভিউপোর্টে "ভিউপোর্ট প্রস্থের 100%", 481-1024px চওড়া স্ক্রিনে "ভিউপোর্ট প্রস্থের 50%" এবং এর চেয়ে চওড়া স্ক্রিনে 800px 1024px এই প্রস্থগুলি CSS-এ উল্লেখিত প্রস্থের সাথে মেলে।

একাধিক স্লট প্রস্থ নির্দিষ্ট করার ক্ষমতা বিভিন্ন ভিউপোর্ট আকারের জন্য বিভিন্ন স্টাইলিং (অর্থাৎ চিত্রের প্রস্থ) ব্যবহার করে এমন পৃষ্ঠা লেআউটগুলিকে মিটমাট করে।

একাধিক স্লট প্রস্থ কীভাবে নির্দিষ্ট করবেন

• একাধিক স্লট প্রস্থ নির্দিষ্ট করতে একটি কমা-বিচ্ছিন্ন তালিকা ব্যবহার করুন। প্রতিটি তালিকা আইটেম, শেষ আইটেম ব্যতীত, একটি মিডিয়া শর্ত (যেমন max-width বা min-width ) এবং একটি স্লট প্রস্থ নিয়ে গঠিত।
• এই তালিকার শেষ আইটেমটি হল ডিফল্ট স্লট প্রস্থ। এটি ডিফল্ট, তাই আপনাকে মিডিয়া শর্ত উল্লেখ করার প্রয়োজন নেই।
• আপনি যতটা চান স্লট প্রস্থের তালিকা করতে পারেন - srcset এ তালিকাভুক্ত ছবির সংখ্যা কোন ব্যাপার নয়।

• স্লট প্রস্থ বিভিন্ন ইউনিট ব্যবহার করে নির্দিষ্ট করা যেতে পারে। নিম্নলিখিত সমস্ত বৈধ প্রস্থ:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

নিম্নলিখিত একটি বৈধ প্রস্থ নয়:

• 25% (শতাংশ মাপ বৈশিষ্ট্যের সাথে ব্যবহার করা যাবে না)