Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা responsive design এর উপর জোর দেয়, এবং এটি ওয়েবসাইটে images (ছবি) এবং videos (ভিডিও) কে রেসপন্সিভ (প্রতিক্রিয়াশীল) করে তুলে যাতে তারা বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়। Responsive images এবং responsive videos ওয়েবসাইটের অভিজ্ঞতা উন্নত করার জন্য অত্যন্ত গুরুত্বপূর্ণ, বিশেষত মোবাইল এবং ট্যাবলেট ব্যবহারকারীদের জন্য।
এখানে Materialize CSS ব্যবহার করে responsive images এবং responsive videos তৈরি করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Responsive Images
Responsive images হল এমন ছবি যা স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে। Materialize CSS এ responsive images তৈরি করতে responsive-img ক্লাস ব্যবহার করা হয়।
১. Responsive Image তৈরি করা
<img src="image.jpg" class="responsive-img" alt="Responsive Image">
এখানে:
responsive-imgক্লাস ব্যবহার করে ছবির আকার স্ক্রীনের সাইজ অনুযায়ী পরিবর্তিত হবে। এটি ছবির সর্বোচ্চ প্রস্থটি 100% রাখে এবং ছবি কোনোভাবেই স্ক্রীন সাইজের বাইরে চলে না।alt="Responsive Image": এটি ছবির বর্ণনা প্রদান করে, যা SEO এবং অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।
২. Image container এর মধ্যে responsive image
আপনি যদি একটি কনটেইনারের মধ্যে ছবি রাখতে চান, তবে responsive-img ক্লাসটি কনটেইনারের উপরেও প্রয়োগ করতে পারেন:
<div class="container">
<img src="image.jpg" class="responsive-img" alt="Responsive Image">
</div>
এখানে, container ক্লাসটি আপনার ছবিটিকে কনটেইনারের ভিতরে সুন্দরভাবে রেখে দেয় এবং ছবিটি ওয়েবসাইটের বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়।
৩. Picture Element ব্যবহার করে multiple resolutions
<picture>
<source media="(max-width: 600px)" srcset="image-small.jpg">
<source media="(min-width: 601px)" srcset="image-large.jpg">
<img src="image-default.jpg" alt="Responsive Image">
</picture>
এখানে:
<source>: এটি বিভিন্ন স্ক্রীন সাইজের জন্য বিভিন্ন ছবি লোড করতে সহায়ক।<img>: এটি ডিফল্ট ছবি হিসেবে কাজ করে যদি মিডিয়া কোয়েরি পূর্ণ না হয়।
Responsive Videos
Responsive videos হল এমন ভিডিও যা স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে এবং স্ক্রীনের সীমানা ভেদ করে না। Materialize CSS এ ভিডিও রেসপন্সিভ করার জন্য responsive-video ক্লাস ব্যবহার করা হয়।
১. Responsive Video তৈরি করা
<div class="video-container">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
এখানে:
video-container: Materialize CSS এরvideo-containerক্লাসটি ভিডিওকে রেসপন্সিভ করে তোলে।iframe: ভিডিও এম্বেড করার জন্য আইফ্রেম ব্যবহার করা হয়। এখানে ইউটিউব ভিডিও এম্বেড করা হয়েছে।
২. Responsive Video ব্যবহার করা (YouTube Example)
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
এখানে:
- video-container: ভিডিও কনটেইনারের মধ্যে
responsive-videoফিচার কাজ করবে। - src="https://www.youtube.com/embed/VIDEO_ID": এখানে আপনার ইউটিউব ভিডিও আইডি ব্যবহার করতে হবে।
৩. Responsive Video with Custom Aspect Ratio
Materialize CSS এর মাধ্যমে আপনি ভিডিওটির aspect ratio কাস্টমাইজ করতে পারেন, যাতে ভিডিওটির আকার স্ক্রীন অনুসারে সঠিকভাবে মাপ নেওয়া যায়।
<div class="video-container" style="padding-bottom: 56.25%;">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
এখানে:
- padding-bottom: 56.25%;: এটি ভিডিওর aspect ratio (16:9) কে রক্ষা করবে। আপনি যদি 4:3 রেশিও চান, তবে padding-bottom: 75% ব্যবহার করতে পারেন।
উপসংহার
Responsive images এবং responsive videos ওয়েবসাইট ডিজাইনের অন্যতম গুরুত্বপূর্ণ উপাদান, বিশেষ করে যখন আমরা মোবাইল-প্রথম ডিজাইন তৈরি করি। Materialize CSS এর সাহায্যে আপনি সহজেই এই উপাদানগুলোকে ওয়েবসাইটে অন্তর্ভুক্ত করতে পারেন। Responsive images-এর জন্য responsive-img ক্লাস এবং responsive videos-এর জন্য video-container ক্লাস ব্যবহার করে আপনি যে কোনো ছবি বা ভিডিওকে সঠিকভাবে স্ক্রীন সাইজ অনুযায়ী প্রদর্শন করতে পারবেন।
এই ফিচারগুলির মাধ্যমে আপনি একটি প্রাকৃতিক এবং ব্যবহারকারী-বান্ধব অভিজ্ঞতা নিশ্চিত করতে পারেন, যা প্রতিটি ডিভাইসে ওয়েবসাইটের কনটেন্টকে সঠিকভাবে উপস্থাপন করবে।
Read more
