X

X

X

রেসপনসিভ ওয়েব ডিজাইন - ছবি


আপনার ব্রাউজার স্ক্রিন সাইজ হ্রাস-বৃদ্ধি করুন, দেখবেন ইমেজটি স্বয়ংক্রিয়ভাবে ব্রাউজারে যথাযথভাবে উপস্থাপিত হওয়ার জন্য তার সাইজ পরিবর্তন করছে।


width Property-এর ব্যবহার

যদি ইমেজ ইলামেন্টের width property -এর মান 100% করা হয়, তবে ইমেজটি রেসপনসিভ হবে এবং এটি ডিভাইসের আকার পরিবর্তনের সাথে সাথে তারও আকার পবির্তন করবে।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

লক্ষ্যণীয়: ইমেজের প্রস্থ ১০০% করার ফলে ইমেজটি তার মূল সাইজের চাইতে বড় হিসেবে উপস্থাপিত হতে পারে। সেক্ষেত্রে ইমেজ কোয়ালিটি ভালো হবে না। কাজেই এক্ষেত্রে max-width প্রপার্টির মান সেট করা উত্তম।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


রেসপনসিভ ইমেজ ইলামেন্টের উদাহরণ

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Background Image

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

১। background-size property এর মান “contain” হলে, ব্যাকগ্রাউন্ড ইমেজ স্বয়ংক্রিয়ভাবে রিসাইজ হবে এবং নির্ধারিত এরিয়ায় সঠিকভাবে উপস্থাপিত হবে। অর্থাৎ, যেকোনো সাইজের ডিভাইসে ইমেজটি পুরোপুরি প্রদর্শিত হবে।

নিচে সিএসএস কোডটি দেওয়া হলো:

Code Example

div {
    width: 100%;
    height: 400px;
    background-image: url('https://www.w3schools.com/css/img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


২। যদি background-size property এর মান “100% 100%” সে করা হয়, তবে ব্যাকগ্রাউন্ড ইমেজ পুরো কন্টেন্ট এরিয়ায় উপস্থাপিত হবে।

নিচে সিএসএস কোডটি দেওয়া হলো:

Code Example

div {
    width: 100%;
    height: 400px;
    background-image: url('https://www.w3schools.com/css/img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


৩। যদি background-size property এর মান “cover” সেট করা হয়, তবে ব্যাকগ্রাউন্ড ইমেজ পুরো ইলামেন্টের ব্যাকগ্রাউন্ডে উপস্থাপিত হবে, কিন্তু ইমেজটি ক্লিপ হতে পারে:

নিচে সিএসএস কোডটি দেওয়া হলো:

Code Example

div {
    width: 100%;
    height: 400px;
    background-image: url('https://www.w3schools.com/css/img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বিভিন্ন ডিভাইসের জন্য বিভিন্ন ইমেজ

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

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

Code Example

/* For width smaller than 400px: */
body {
    background-repeat: no-repeat;
    background-image: url('https://www.w3schools.com/css/img_smallflower.jpg'); 
}

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

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

Code Example

/* For device width smaller than 400px: */
body {
    background-repeat: no-repeat;
    background-image: url('https://www.w3schools.com/css/img_smallflower.jpg'); 
}

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5 <picture> Element

HTML5 এ <picture> element ব্যবহার করে ইমেজ উপস্থাপন করা যায়। এই ইলামেন্টটি HTML5-এর নতুন সংযোজন। এই ইলামেন্টের মাধ্যমে একসাথে অনেকগুলো ইমেজ উপস্থাপন করা যায়।

Browser Support

Element
<picture> 13 38.0 38.0 9.1 25.0

<picture> element <video><audio> ইলামেন্টের মত কাজ করে। এটিতে একসাথে অনেকগুলো সোর্স সেট করা যায়। যদি কোনো সোর্স না পাওয়া যায়, তবে পরের সোর্সটি ব্যবহৃত হবে।

Code Example

<picture>
  <source srcset="https://www.w3schools.com/css/img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="https://www.w3schools.com/css/img_flowers.jpg">
  <img src="https://www.w3schools.com/css/img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উক্ত ইলামেন্টের জন্য srcset attribute টি অবশ্যই ডিফাইন করতে হবে, কেননা এর মাধ্যমে ইমেজের সোর্স নির্দেশ করা হয়।

media attribute ব্যবহার না করলেও চলবে। এটি optional ।

এটি নতুন ইলামেন্ট কাজেই , যেসব ব্রাউজারে এটি সাপোর্ট করে না, তার জন্য <img> ইলামেন্ট ব্যবহার করা উচিৎ।