Pure.CSS ব্যবহার করে Responsive Images তৈরি করা খুবই সহজ এবং কার্যকরী। ওয়েব ডেভেলপমেন্টে Responsive Images মানে এমন ছবি যা স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী নিজেকে মানিয়ে নেয়, যাতে যে কোন ডিভাইসে (মোবাইল, ট্যাবলেট, ডেস্কটপ) সঠিকভাবে প্রদর্শিত হয়।
Pure.CSS নিজে কোনো বিশেষ ইমেজ স্টাইলিং ক্লাস প্রদান না করলেও, CSS এর মাধ্যমে max-width, height, এবং width প্রপার্টি ব্যবহার করে খুব সহজেই ইমেজগুলিকে রেসপনসিভ করা সম্ভব।
এখানে Pure.CSS ব্যবহার করে Responsive Images তৈরি করার কিছু পদ্ধতি দেওয়া হলো:
1. Simple Responsive Image (Using CSS)
একটি সহজ এবং কার্যকরী পদ্ধতি হল ইমেজের জন্য max-width এবং height প্রপার্টি ব্যবহার করা, যাতে ইমেজের প্রস্থ ডিভাইসের স্ক্রীন সাইজ অনুযায়ী অটোমেটিক্যালি মানিয়ে নেয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Make the image responsive */
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/1200x800" alt="Responsive Image">
</body>
</html>
ব্যাখ্যা:
max-width: 100%;: এই প্রপার্টি নিশ্চিত করে যে ইমেজটি তার কনটেইনারের প্রস্থের সাথে মানিয়ে নিবে এবং কখনও 100% এর বেশি প্রস্থ নিবে না।height: auto;: এই প্রপার্টি দিয়ে ইমেজের উচ্চতা স্বয়ংক্রিয়ভাবে সমন্বিত হয়, যাতে ইমেজের আন্ডারস্ট্যান্ডিং হার অক্ষুণ্ণ থাকে।display: block;: ইমেজটি ব্লক উপাদান হিসেবে প্রদর্শিত হবে, যাতে এটি প্যারাগ্রাফ বা অন্যান্য উপাদানের মত নিজে থেকে নতুন লাইনে আসে।margin: 0 auto;: ইমেজটিকে সেন্টার করতে ব্যবহৃত হয়েছে।
এটি একটি খুবই সাধারণ এবং কার্যকরী উপায়, যেখানে ইমেজটি রেসপনসিভ হবে এবং স্ক্রীনের আকারের সাথে মানিয়ে যাবে।
2. Responsive Images with srcset Attribute
অন্য একটি পদ্ধতি হল srcset অ্যাট্রিবিউট ব্যবহার করা। এটি বিভিন্ন স্ক্রীন সাইজের জন্য ভিন্ন ভিন্ন ইমেজ সরবরাহ করে, যাতে উচ্চ রেজোলিউশনের ডিভাইসে বড় ইমেজ এবং কম রেজোলিউশনের ডিভাইসে ছোট ইমেজ লোড করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
</style>
</head>
<body>
<img srcset="https://via.placeholder.com/1200x800 1200w,
https://via.placeholder.com/800x533 800w,
https://via.placeholder.com/400x267 400w"
sizes="(max-width: 600px) 400px, 800px"
src="https://via.placeholder.com/1200x800" alt="Responsive Image">
</body>
</html>
ব্যাখ্যা:
srcset: এখানে আপনি একাধিক ছবি (বিশেষ আকারে) সংজ্ঞায়িত করেছেন। এটি ব্রাউজারকে জানায় যে কোন আকারের ছবি কোন পরিস্থিতিতে ব্যবহার করা হবে।1200w: একটি বড় ছবি যা বড় স্ক্রীনে ব্যবহার হবে।800w: একটি মাঝারি আকারের ছবি যা মিডিয়াম স্ক্রীনে ব্যবহার হবে।400w: একটি ছোট ছবি যা মোবাইল স্ক্রীনে ব্যবহার হবে।
sizes: এখানে, ব্রাউজারটি প্রতিটি স্ক্রীন সাইজ অনুযায়ী ছবি নির্বাচন করবে।(max-width: 600px) 400px: যখন স্ক্রীনের প্রস্থ 600px বা কম হবে, তখন 400px চওড়া ইমেজটি ব্যবহার করবে।800px: অন্য সব ক্ষেত্রে 800px চওড়া ইমেজটি ব্যবহার করবে।
src: ডিফল্ট ইমেজ যা ব্রাউজার আগে লোড করবে যদিsrcsetকাজ না করে।
এটি উন্নত ইমেজ ব্যবস্থাপনা প্রযুক্তি এবং ওয়েব পেজ লোডিং টাইম কমানোর জন্য বেশ কার্যকরী।
3. Responsive Background Image with Pure.CSS
Pure.CSS এর মাধ্যমে আপনি background-image ব্যবহার করে রেসপনসিভ ইমেজও তৈরি করতে পারেন। এটি সাইড বা ব্যাকগ্রাউন্ড হিসেবে একটি ইমেজ সেট করতে সাহায্য করে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Background Image with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.responsive-bg {
background-image: url('https://via.placeholder.com/1200x800');
background-size: cover;
background-position: center;
width: 100%;
height: 400px;
}
@media (max-width: 600px) {
.responsive-bg {
background-image: url('https://via.placeholder.com/800x533');
height: 250px;
}
}
</style>
</head>
<body>
<div class="responsive-bg"></div>
</body>
</html>
ব্যাখ্যা:
.responsive-bg: এখানে আমরাbackground-imageব্যবহার করে একটি ইমেজ ব্যাকগ্রাউন্ড হিসেবে সেট করেছি।background-size: cover;প্রপার্টি ইমেজটিকে পুরো কন্টেইনারে ঢেকে দেবে।- Media Queries:
@media (max-width: 600px)ব্যবহার করে মোবাইল স্ক্রীনে ব্যাকগ্রাউন্ড ইমেজের আকার এবং ইমেজ পরিবর্তন করা হয়েছে।
এটি একটি খুবই সাধারণ পদ্ধতি, যেখানে ব্যাকগ্রাউন্ড ইমেজটি রেসপনসিভ হয়ে স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
Pure.CSS ব্যবহার করে Responsive Images তৈরি করা খুবই সহজ। আপনি CSS এর মাধ্যমে max-width, height, srcset, এবং background-image প্রপার্টি ব্যবহার করে আপনার ওয়েবসাইটে রেসপনসিভ ইমেজ তৈরি করতে পারেন। Responsive images আপনার ওয়েবসাইটের পারফরম্যান্স উন্নত করতে সাহায্য করে এবং বিভিন্ন স্ক্রীনে উপযুক্ত ইমেজ প্রদর্শন করতে সক্ষম হয়। Pure.CSS এর সহায়তায় আপনি সহজেই এই সুবিধাগুলো কার্যকরী করতে পারেন।
Read more
