মূলঃ CSS Responsive Image Tutorial: How to Make Images Responsive with CSS, লেখকঃ Cem Eygi

আজকালকার সিংহভাগ ওয়েবসাইট রেসপন্সিভ। এবং আপনি যদি রেসপন্সিভে ওয়েবসাইটের ইমেজগুলিকে সেন্টার এবং অ্যালাইন করতে চান তাহলে আপনার জানতে হবে কিভাবে ইমেজগুলিকে রেসপন্সিভ করা যায়।

আমি কয়েক সপ্তাহ আগে একটি টিউটোরিয়াল ভিডিও পোস্ট করেছিলাম যেখানে দেখানো হয়েছে কিভাবে ধাপে ধাপে একটি রেসপন্সিভ ওয়েবসাইট বানানো যায়। এই ভিডিওতে আমরা একটি ইমেজকে রেসপন্সিভ করেছিলাম। তবে এই পোস্টে, আমি ইমেজ রেসপন্সিভ করা নিয়ে আরও একটু বিস্তারিত আলোচনা করতে চাই।

ইমেজ রেসপন্সিভ করার সময় ঘটতে পারে এমন কিছু সমস্যা সম্পর্কেও আপনি এখানে জানবেন এবং আমি তাদের সমাধান ব্যাখ্যা করার চেষ্টা করবো।

CSS এর সাহায্যে কিভাবে ইমেজগুলিকে রেসপন্সিভ করা যায়

আমি কি Relative Units ব্যবহার করবো নাকি Absolute Units?

একটি ইমেজকে রেসপন্সিভ করা আসলে বেশ সোজা। আপনি যখন আপনার ওয়েবসাইটে একটি ইমেজ আপলোড করেন তখন এর একটি ডিফল্ট width এবং height থাকে। CSS এর মাধ্যমে আপনি এগুলি পরিবর্তন করতে পারেন।

একটি ইমেজকে রেসপন্সিভ করার জন্য আপনাকে এর width প্রপার্টিকে একটি নতুন মান দিতে হবে। এরপর ইমেজটির height স্বয়ংক্রিয়ভাবে পরিবর্তন হয়ে যাবে।

এক্ষেত্রে গুরুত্বপূর্ণ যে ব্যাপারটি মনে রাখতে হবে তা হল, width এর মান হিসেবে আপনাকে সবসময় relative units যেমন percentage ব্যবহার করতে হবে, absolute units যেমন pixels না।

img {
  width: 500px;
}
Animated-GIF-downsized_large

উদাহরণস্বরূপ আপনি যদি width হিসেবে 500px সেট করেন, তাহলে আপনার ইমেজটি রেসপন্সিভ হবে না, কারণ এটি একটি absolute unit।

img {
  width: 50%;
}
Animated-GIF-downsized-1-

এজন্যই আপনার সবসময় relative unit যেমন 50% ব্যবহার করতে হবে। এর ফলে আপনার ইমেজটি রেসপন্সিভ হবে এবং স্ক্রীন সাইজ অনুযায়ী নিজের আকার পরিবর্তন করতে পারবে।

আমি কি মিডিয়া কুয়েরি ব্যবহার করবো?

অনেকের কাছেই আমি যে প্রশ্নটা সবথেকে বেশি শুনি তা হল আপনি মিডিয়া কুয়েরি ব্যবহার করবেন কি না।

মিডিয়া কুয়েরি হল আরেকটি গুরুত্বপূর্ণ CSS প্রপার্টি যার মাধ্যমে ওয়েবসাইটকে রেসপন্সিভ করা যায়। আমি এখানে বিস্তারিত আলোচনা করবো না তবে আপনি চাইলে আমার আরেকটি পোস্ট পড়তে পারেন যেখানে মিডিয়া কুয়েরি নিয়ে বিস্তারিত আলোচনা করা হয়েছে।

যদি আপনি ভিন্ন ভিন্ন আকারের ডিভাইসে আপনার ইমেজের সাইজ ভিন্ন ভিন্ন চান তাহলে আপনার মিডিয়া কুয়েরি ব্যবহার করতে হবে, অন্যথায় না।

এই উদাহরণটিতে যে কোন স্ক্রীনের জন্য আপনার ইমেজের width 50% হবে। কিন্তু আপনি যদি মোবাইল ডিভাইসে এটিকে ফুল সাইজ করতে চান তাহলে আপনাকে মিডিয়া কুয়েরি ব্যবহার করতে হবেঃ

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}
Animated-GIF-downsized-2-

সুতরাং মিডিয়া কুয়েরি রুল অনুযায়ী 480px এর থকে ছোট যে কোন ডিভাইসে ইমেজটি ডিভাইসের সম্পূর্ণ width নিয়ে নিবে।

আপনি চাইলে এই পোস্টটির ভিডিও সংসকরণটি দেখতে পারেনঃ

max-width প্রপার্টিটি কেন খুব একটা সুবিধাজনক নয়

রেসপন্সিভ ইমেজ তৈরি করার আরেকটি পদ্ধতি হল max-width প্রপার্টি। তবে এটি খুব একটি ভাল পদ্ধতি নয় কারণ এই প্রপার্টিটি সব স্ক্রীন সাইজ বা ডিভাইসে কাজ না ও করতে পারে।

কোন উদাহরণে যাওয়ার আগে যে ব্যাপারটি আমাদের বুঝতে হবে তা হল max-width প্রপার্টি আসলে কি করে।

max-width প্রপার্টিটি একটি এলিমেন্টের জন্য একটি maximum width সেট করে। যার ফলে এলিমেন্টটির আকার ঐ max-width এর থেকে বড় হতে পারে না কিন্তু ছোট হতে পারে।

যেমন আপনার ইমেজ্টির width যদি হয় 500px এবং আপনার স্ক্রীনের সাইজ যদি হয় 360px, তাহলে আপনি সম্পূর্ণ ইমেজটি দেখতে পারবেন না। কারণ ইমেজের জন্য যথেষ্ট যায়গাই নেইঃ

img {
  max-width: 100%;
  width: 500px;  // assume this is the default size
}
Animated-GIF-downsized-3-

অতএব, ইমেজটির max-width প্রপার্টির মান হিসেবে আপনি 100% সেট করতে পারেন যার ফলে 500px ইমেজটি ছোট হয়ে 360px হয়ে যাবে। এবার আপনি ছোট স্ক্রীনেও সম্পূর্ণ ইমেজটি দেখতে পারবেন।

যেহেতু আপনি relative unit ব্যবহার করেছেন আপনার ইমেজটি 500px এর থেকে ছোট যে কোন ডিভাইসে রেসপন্সিভ থাকবে।

তবে স্ক্রীন সাইজ যদি 500px এর থেকে বেশি হয় তাহলে ইমেজটি আর বড় হবে না, কারণ এর ডিফল্ট width হল 500px। এর ফলে ইমেজের রেসপন্সিভনেস নষ্ট হবে।

এটি ঠিক করার জন্য আপনাকে আবারো width প্রপার্টিটি ব্যবহার করতে হবে যা max-width প্রপার্টিকে অকেজো করে ফেলবে।

ছবির দৈর্ঘ্যের কি হবে?

সাধারণত ইমেজের height স্বয়ংক্রিয়ভাবে সেট হয়ে যায় তাই আপনার ম্যানুয়ালি height সেট করতে হয় না।

তবে তবে কিছু কিছু ক্ষেত্রে আপনার এমন ইমেজ নিয়ে কাজ করতে হতে পারে যার height নির্দিষ্ট থাকবে। আপনি যখন একটি ইমেজের height নির্দিষ্ট করে দেন তখনও ইমেজটি রেসপন্সিভ থাকবে তবে দেখতে সুন্দর হবে না।

img {
  width: 100%;
  height: 300px;
}
Animated-GIF-downsized-4-

সৌভাগ্যবশত আরেকটি CSS প্রপার্টি আছে যার মাধ্যমে এটি সমাধান করা সম্ভব।

সমাধানঃ Object-Fit প্রপার্টি

আপনার ছবির উপরে আরও নিয়ন্ত্রণ পাওয়ার জন্য আপনি object-fit প্রপার্টিটি ব্যবহার করতে পারেন। চলুন তাহলে object-fit প্রপার্টিটি ব্যবহার করে দেখা যাকঃ

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}
Animated-GIF-downsized-5-

প্রয়োজন হলে ছবির নির্দিষ্ট কোন অংশে ফোকাস করার জন্য, object-fit প্রপার্টির পাশাপাশি object-position প্রপার্টিটি ব্যবহার করতে পারেন। অনেকেই object-fit প্রপার্টি সম্পর্কে জানেন না তবে এ ধরণের সমস্যা সমাধানে এই প্রপার্টি বেশ কার্যকরী।

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

পড়ার জন্য ধন্যবাদ!