সিএসএস রেস্পন্সিভ ইমেজ - Css Responsive Images



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


width প্রপার্টি

ইমেজের width প্রোপার্টির মান 100% ব্যবহার করে ইমেজকে রেস্পন্সিভ করা যায়। এর ফলে ছবিটি শুধু ওপর-নিচের উচ্চতা পরিবর্তন করে।

উদাহরণ

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


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


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

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

উদাহরণ

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




ব্যাকগ্রউানডে ইমেজ

ব্যাকগ্রাউন্ড ইমেজকে মিডিয়া ক্যোয়ারী ব্যবহার করে রিসাইজ করা যেতে পারে। এখানে আমরা তিনটি ভিন্ন পদ্ধতি দেখবো -

contain ব্যবহার - যদি background-size প্রোপার্টির মান "contain" নির্ধারণ করা হয়, তবে ব্যাকগ্রাউন্ড ইমেজটি DIV এলিমেন্টের মধ্যেই থাকবে এবং ইমেজটি তার প্রস্থ এবং দৈর্ঘ্যের আনুপাতিক হার ঠিক রাখবে। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

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


শতকরা মান ব্যবহার - যদি background-size প্রোপার্টির মান 100% 100% নির্ধারণ করা হয়, তবে ব্যাকগ্রাউন্ড ইমেজটি সমগ্র DIV এলিমেন্ট দখল করবে। নিচে একটি উদাহরণ দেখুন

উদাহরণ

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


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

উদাহরণ

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




ডিভাইসভেদে ভিন্ন ছবি

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

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

উদাহরণ

/* 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 প্রপার্টি ব্যবহার মিডিয়া ক্যোয়ারী তৈরি করা যায়, যা ব্রাউজারের প্রস্থের পরিবর্তে ডিভাইস স্ক্রীনের প্রস্থকে প্রাধান্য দেয়। এক্ষেত্রে ব্রাউজার উইন্ডো পুনরায় আকার পরিবর্তন করলেও ছবিটি পরিবর্তন হবে না।

উদাহরণ

/* 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');
}
}




HTML5 <picture> এলিমেন্ট

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

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

উদাহরণ

<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>


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

যেসকল ব্রাউজারে <picture> এলিমেন্ট সাপোর্ট করেনা, সেসব ব্রাউজারের জন্য <img> এলিমেন্ট নির্ধারণ করে দেয়া উচিৎ।


ব্রাউজার সাপোর্ট

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







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.