width প্রোপার্টি

ইমেজের width প্রোপার্টির ভ্যালু 100% ব্যবহার করে ইমেজকে রেস্পন্সিভ করা যায়ঃ

kt_satt_skill_example_id=1839

উপরের উদাহরণে ইমেজটিকে তার প্রস্থের চেয়ে বড় করা যায়। এই সমস্যা সমাধানের একটি ভালো উপায় max-width প্রোপার্টি ব্যবহার করা।

max-width প্রোপার্টি

ইমেজের max-width প্রোপার্টির মান 100% দেওয়া হলে ইমেজটিকে ইচ্ছে করলে ছোট করতে পারবো, কিন্তু এর আকারের চেয়ে বড় করা যাবে নাঃ

kt_satt_skill_example_id=1838

ওয়েব পেজে ইমেজের ব্যবহার

kt_satt_skill_example_id=1837

ব্যাকগ্রাউন্ড ইমেজ

ব্যাকগ্রাউন্ড ইমেজকে স্কেলিং এবং রিসাইজ করা যেতে পারে। এখানে আমরা তিনটি ভিন্ন মেথড দেখবোঃ

১. যদি background-size প্রোপার্টির মান "contain" হয়, ব্যাকগ্রাউন্ড ইমেজটি DIV এলিমেন্টের এরিয়ার মধ্যে সেট থাকবে এবং ইমেজটি তার প্রস্থ এবং দৈর্ঘ্যের আনুপাতিক হার ঠিক রাখবেঃ

kt_satt_skill_example_id=1836

২. যদি background-size প্রোপার্টির মান 100% 100% হয়, ব্যাকগ্রাউন্ড ইমেজ সমগ্র DIV এলিমেন্ট দখল করবেঃ

kt_satt_skill_example_id=1835

৩. যদি background-size প্রোপার্টির মান "cover" সেট করা হয়, ব্যাকগ্রাউন্ড ইমেজ এলিমেন্টের সম্পূর্ণ এরিয়া দখল করবে। "cover" ব্যবহারের কারণে অানুপাতিক হার ঠিক থাকবে এবং ইমেজের কিছু অংশ বাদ পরতে পারেঃ

kt_satt_skill_example_id=1834

ডিভাইসভেদে ভিন্ন ইমেজ প্রদর্শন

আমরা একটি বড় ইমেজকে কম্পিউটারে প্রদর্শনের জন্য ব্যবহার করি এবং ঐ বড় ইমেজকেই ছোট ডিভাইসের জন্য ছোট আকারে প্রদর্শন করি। যেহেতু আমরা ছোট ডিভাইসের জন্য ছোট আকারের ইমেজ প্রদর্শন করবো তাহলে একটি বড় ইমেজ ব্যবহার করে পেজ লোড হওয়ার সময় বৃদ্ধি করার কোন মানে হয় না।

আমরা মিডিয়া কুয়েরি ব্যবহার করে ছোট ডিভাইসের জন্য একটি ছোট আকারের ইমেজ ব্যবহার করতে পারি, এতে আমাদের পেজের পারফরমেন্স অনেক বৃদ্ধি পাবে।

নিচে একই ইমেজকে দুইটি ডিভাইসে প্রদর্শনের জন্য দুইটি আকারে দেখানো হলোঃ

kt_satt_skill_example_id=1833

আপনি মিডিয়া কুয়েরিতে min-width এর পরিবর্তে min-device-width ব্যবহার করতে পারেন, ইহা ব্রাউজারের প্রস্থের পরিবর্তে ডিভাইসের প্রস্থ পরিমাপ করবে। তখন আপনি ব্রাউজারের আকার পরিবর্তন করলেও ইমেজ পরিবর্তন হবে নাঃ

kt_satt_skill_example_id=1832

এইচটিএমএল(৫) এলিমেন্ট

এইচটিএমএল(৫) এর < picture> এলিমেন্ট ব্যবহার করে আপনি একাধিক ইমেজ যোগ করতে পারবেন।

< picture> এলিমেন্ট < video> এবং < audio> এলিমেন্টের মতই কাজ করে। আপনি এক সাথে একাধিক উৎস সেট করতে পারেন এবং প্রথম যে উৎসের ফাইলটি ব্রাউজারের সাথে মানানসই হবে সেটিই ব্যবহার করা হবেঃ

kt_satt_skill_example_id=1831

srcset এট্রিবিউটটি বাধ্যতামূলক এবং ইহাই ইমেজের উৎসগুলো ডিফাইন করে।

যেসব ব্রাউজারে < picture> এলিমেন্ট সাপোর্ট করেনা, তাদের জন্য আপনাকে < img> এলিমেন্টটি ডিফাইন করতে হবে।