এই ডেমো ব্যবহার করে দেখুন
সাইটের প্রিভিউ দেখতে, অ্যাপ দেখুন বিকল্পে প্রেস করুন। তারপর ফুল-স্ক্রিন
বিকল্পে প্রেস করুন।বিভিন্ন সাইজের ব্রাউজার উইন্ডোতে অ্যাপটি রিলোড করে দেখুন যে ব্রাউজারটি বিভিন্ন সাইজের জন্য বিভিন্ন ছবি লোড করছে এবং বিভিন্ন লেআউট ব্যবহার করছে।
কোড দেখুন
- এই কোডটি কীভাবে কাজ করে তা জানতে
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 অ্যাট্রিবিউটের মান থেকে বোঝা যায় যে ছবির ডিসপ্লে প্রস্থ হবে:
৪৮০ পিক্সেল পর্যন্ত চওড়া ভিউপোর্টে "ভিউপোর্ট প্রস্থের ১০০%", ৪৮১–১০২৪ পিক্সেল চওড়া স্ক্রিনে "ভিউপোর্ট প্রস্থের ৫০%" এবং ১০২৪ পিক্সেলের চেয়ে বেশি চওড়া স্ক্রিনে ৮০০ পিক্সেল। এই
প্রস্থ CSS-এ উল্লেখ করা প্রস্থের সাথে ম্যাচ করে।
একাধিক স্লটের প্রস্থ নির্দিষ্ট করার সুবিধা, বিভিন্ন ভিউপোর্ট সাইজের জন্য বিভিন্ন স্টাইলিং (অর্থাৎ, ছবির প্রস্থ) ব্যবহার করে এমন পৃষ্ঠা লেআউটকে মানিয়ে নেয়।
একাধিক স্লটের প্রস্থ কীভাবে নির্দিষ্ট করবেন
- একাধিক স্লটের প্রস্থ নির্দিষ্ট করতে কমা দিয়ে আলাদা করা তালিকা ব্যবহার করুন। শেষ আইটেমটি ছাড়া,
তালিকার প্রতিটি আইটেমে একটি মিডিয়া কন্ডিশন (যেমন,
max-widthবাmin-width) এবং একটি স্লটের প্রস্থ থাকে। - এই তালিকার শেষ আইটেমটি হল ডিফল্ট স্লটের প্রস্থ। এটি ডিফল্ট, তাই আপনাকে মিডিয়া কন্ডিশন নির্দিষ্ট করতে হবে না।
- আপনি যতগুলি চান ততগুলি স্লটের প্রস্থের তালিকা করতে পারেন -
srcset-এ তালিকাভুক্ত ছবির সংখ্যা গুরুত্বপূর্ণ নয়। বিভিন্ন ইউনিট ব্যবহার করে স্লটের প্রস্থ নির্দিষ্ট করা যেতে পারে। নিম্নলিখিতগুলি হল সঠিক প্রস্থ:
100px33vw20emcalc(50vw-10px)
নিম্নলিখিত প্রস্থটি সঠিক নয়:
25%(সাইজ অ্যাট্রিবিউটের সাথে শতাংশ ব্যবহার করা যাবে না)