সিএসএস রেস্পন্সিভ ছবি - Css Responsive Images


কোন ওয়েব পেজ কে দৃষ্টিনন্দন ও আকর্ষণীয় করে তোলার জন্য ছবির ব্যবহার অনস্বীকার্য। একটি ওয়েব পেজ কে সুন্দর করে সাজাতে যেমন বিভিন্ন স্টাইলের ফন্ট, মানানসই কালার এর প্রয়োজন, তেমনি সুন্দর ছবির প্রয়োজনীয়তাও রয়েছে। সঠিক স্থানে সঠিক ছবির ব্যবহার একটি ওয়েব পেজ এর উন্নত আউটলুক নির্ধারণে সহায়তা করে।

রেসপন্সিভ ওয়েব পেজ তথা রেস্পন্সিভ ওয়েবসাইট তৈরি করতে হলে লেখা বা text সহ সকল এলিমেন্টকেই রেস্পন্সিভ করে তুলতে হয়। ছবি বা image তার মাঝে অন্যতম একটি এলিমেন্ট। সিএসএস এর width, max-width, min-width, height, max-height, min-height ইত্যাদি প্রোপার্টি ব্যবহার করে ওয়েব পেজে ব্যাবহৃত ছবি গুলো রেস্পন্সিভ করা যায়।

নিচের ছবিটি লক্ষ করুন। এক্ষেত্রে ব্রাউজার উইন্ডোটি পুনরায় আকার দিন বা resize করে দেখুন, ছবি বা image টি কিরকম নির্দিষ্ট পরিমাপে থাকছে।

Example of CSS responsive image

width প্রোপার্টি

ওয়েব পেজে ব্যাবহৃত ছবিতে পরিবর্তনশীল মান বা value যেমন শতকরা বা percntig অর্থাৎ % পদ্ধতি ব্যবহার করে ছবিকে রেস্পন্সিভ করা যায়। আজন্ন সাধারণত ছবিতে সিএসএস এর width প্রোপার্টির মান 100% এবং height প্রোপার্টির মান auto নির্ধারণ করা হয়। এর ফলে ছবিটি কেবল ওপর-নিচের উচ্চতা বা height পরিবর্তন করে।

সিএসএস এর width এবং height প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

img {
   width: 100%;
   height: auto;
   }

কোড এডিটর


তবে এক্ষেত্রে অনেক সময় ছবিটি তার নিজস্ব আকারের প্রস্থ বা width এর থেকে বড় হয়ে যেতে পারে, তখন এই সমস্যা সমাধানের একটি ভালো উপায় হল max-width প্রোপার্টি ব্যবহার করা।


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

সিএসএস এর width প্রোপার্টি ব্যবহার করলে কখন কখন কোন ছবি তার নিজস্ব আকার থেকে বর হয়ে জেতে পারে, এর ফলে ওয়েব পেজে ছবিটি নিম্নমানের প্রদর্শন করবে।

কিন্তু সিএসএস এর max-width প্রোপার্টির মান 100% নির্ধারণ করে দেওয়ার অর্থ হল ছবিটি প্রয়োজন মত ছোট হতে পারবে কিন্তু, এর নিজস্ব আকারের থেকে বড় হতে পারবে না।

সিএসএস এর max-width প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

img {
   max-width: 100%;
   height: auto;
   }

কোড এডিটর



পৃষ্ঠদেশ বা background

পৃষ্ঠদেশ বা background এ কোন ছবি কে মিডিয়া ক্যোয়ারী ব্যবহার করে রিসাইজ করা যেতে পারে। এখানে আমরা তিনটি ভিন্ন পদ্ধতি নিয়ে আলোচনা করব।

contain ব্যবহার -
যদি background-size প্রোপার্টির মান "contain" নির্ধারণ করা হয়, তবে পৃষ্ঠদেশ বা background এ ছবিটি div এলিমেন্টের মধ্যেই থাকবে এবং ছবিটি তার প্রস্থ বা width এবং দৈর্ঘ্যের বা height এর আনুপাতিক হার ঠিক রাখবে।

নিচে এর একটি উদাহরণ দেখুন, যেখানে সিএসএস এর background-size প্রোপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

div {
   width: 100%;
   height: 400px;
   background-image: url('img_fruites.jpg');
   background-repeat: no-repeat;
   background-size: contain;
   border: 1px solid green;
   }

কোড এডিটর



শতকরা মান ব্যবহার -
যদি সিএসএস এর background-size প্রোপার্টির মান 100% 100% নির্ধারণ করা হয়, তবে পৃষ্ঠদেশ বা background এর ছবিটি সমগ্র div এলিমেন্ট দখল করবে।

নিচে এর একটি উদাহরণ দেখুন, যেখানে সিএসএস এর background-size প্রোপার্টির মান 100% নির্ধারণ করা হয়েছে।

উদাহরণ

div {
   width: 100%;
   height: 400px;
   background-image: url('img_fruites.jpg');
   background-size: 100% 100%;
   border: 1px solid green;
   }

কোড এডিটর



cover ব্যবহার -
যদি সিএসএস background-size প্রোপার্টির মান "cover" নির্ধারণ করা হয়, তবে পৃষ্ঠদেশ বা background এর ছবিটি, এইচটিএমএল এলিমেন্টের সম্পূর্ণ স্থান দখল করবে। এক্ষেত্রে ছবিটির আনুপাতিক হার ঠিক থাকবে, আবার এতে ছবিটির কিছু অংশ বাদও পরতে পারে।

background-size প্রোপার্টির মান "cover" ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

div {
   width: 100%;
   height: 400px;
   background-image: url('img_flowers.jpg');
   background-size: cover;
   border: 1px solid green;
   }

কোড এডিটর



ডিভাইস নির্ভর ছবি

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

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

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

উদাহরণ

/* For width smaller than 400px: */
body {
   background-image: url('img_smallflower.jpg');
  }

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
   background-image: url('img_flowers.jpg');
  }
}

কোড এডিটর


সিএসএস এর min-width প্রপার্টির পরিবর্তে min-device-width প্রপার্টি ব্যবহার করে মিডিয়া ক্যোয়ারী তৈরি করা যায়, যা ওয়েব ব্রাউজারের প্রস্থ বা width এর পরিবর্তে ডিভাইস স্ক্রীনের প্রস্থ বা width কে প্রাধান্য দেয়। এক্ষেত্রে ব্রাউজার উইন্ডো পুনরায় আকার পরিবর্তন করলেও ছবিটি পরিবর্তন হয় না।

নিচে সিএসএস এর min-device-width প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

/* For devices smaller than 400px: */
body {
   background-image: url('img_smallflower.jpg');
   }

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
   background-image: url('img_flowers.jpg');
   }
}

কোড এডিটর



<picture> এলিমেন্ট

html 5 এর picture এলিমেন্ট অর্থাৎ <picture> ট্যাগ ব্যবহার করে একাধিক ছবিকে নির্ধারণ বা define করা যায়।

picture এলিমেন্ট অর্থাৎ <picture> ট্যাগ মূলত video এবং audio এলিমেন্ট এর মতই কাজ করে। এটা ব্যবহার করে এক সাথে ছবির একাধিক উৎস নির্ধারণ করা যায় এবং এর মধ্যে থেকে যে ছবিটি ব্রাউজারের সাথে মানানসই হয় সেটিই ব্যবহার করা যায়।

নিচে <picture> ট্যাগ ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

<picture>
  <source srcset="img_smallfruites.jpg" media="(max-width: 400px)">
  <source srcset="img_fruites.jpg">
  <img src="img_fruites.jpg" alt="Fruites">
</picture>

কোড এডিটর


এখানে srcset এট্রিবিউটটি বাধ্যতামূলক এবং এটাই ছবি গুলোর উৎস নির্ধারণ করে ও media এট্রিবিউটটি বাধ্যতামূলক নয় অর্থাৎ এটা ব্যবহার না করলেও চলে।

যে সকল ওয়েব ব্রাউজারে picture এলিমেন্ট সমর্থন বা support করেনা, সেসব ব্রাউজারের জন্য img এলিমেন্ট নির্ধারণ করে দেয়া উচিৎ।

এইচটিএমএল এর picture এলিমেন্ট অর্থাৎ <picture> ট্যাগ সম্পর্কে জানতে আমাদের এইচটিএমএল ছবি টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।


ব্রাউজার সমর্থন

এলিমেন্ট
<picture> 13 38.0 38.0 9.1 25.0