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

width প্রোপার্টি

ইমেজের width প্রোপার্টির ভ্যালু 100% ব্যবহার করে ইমেজকে রেস্পন্সিভ করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
img {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="images/satt_bangla.jpg" width="100%" height="780px">
<p> ইমেজকে স্ক্রল করার জন্য ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করা হয়।
  </p>
</body>
</html>

ফলাফল

উপরের উদাহরণে ইমেজটিকে তার প্রস্থের চেয়ে বড় করা যায়। এই সমস্যা সমাধানের একটি ভালো উপায় max-width প্রোপার্টি ব্যবহার করা।

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

ইমেজের max-width প্রোপার্টির মান 100% দেওয়া হলে ইমেজটিকে ইচ্ছে করলে ছোট করতে পারবো, কিন্তু এর আকারের চেয়ে বড় করা যাবে নাঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="images/satt.jpg" width="460" height="345">
<p> ইমেজকে স্ক্রল করার জন্য ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করা হয় যখন প্রস্থ 460px এর কম হয়।</p>
</body>
</html>

ফলাফল

ওয়েব পেজে ইমেজের ব্যবহার

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
* {
    box-sizing: border-box;
}
img {
    width: 100%;
    height: auto;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}
@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
 </style>
 </head>
 <body>

 <div class="header">
 <h1>ঢাকা </h1>
 </div>

 <div class="row">
 <div class="col-3 col-s-3 menu">
 <ul>
 <li>ফ্লাইট </li>
 <li>সিটি </li>
 <li>দ্বীপসমুহ </li>
 <li>খাদ্য </li>
 </ul>
 </div>

 <div class="col-6 col-s-9">
 <h1>সিটি </h1>
 <p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
 ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়। </p>
 <img src="images/dhaka.jpg" width="460" height="345">
 </div>

 <div class="col-3 col-s-12">
 <div class="aside">

 <p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
  ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।
    
 প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে। </p>

 </div>
 </div>

 </div>

 <div class="footer">
 <p>ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়। </p>
 </div>
</body>
</html>

ফলাফল

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

ব্যাকগ্রাউন্ড ইমেজকে স্কেলিং এবং রিসাইজ করা যেতে পারে। এখানে আমরা তিনটি ভিন্ন মেথড দেখবোঃ

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
    width: 100%;
    height: 400px;
    background-image: url("images/satt.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid teal;
}
</style>
</head>
<body>

<p>ব্রাউজার উইন্ডোর প্রতিক্রিয়া দেখার জন্য মাপ পরিবর্তন করা হয়।
    </p>

<div></div>
</body>
</html>

ফলাফল

২. যদি background-size প্রোপার্টির মান 100% 100% হয়, ব্যাকগ্রাউন্ড ইমেজ সমগ্র DIV এলিমেন্ট দখল করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
div {
    width: 100%;
    height: 400px;
    background-image: url(''images/satt.jpg);
    background-size: 100% 100%;
    border: 1px solid teal;
}
  </style>
  </head>
  <body>

  <p>ব্রাউজার উইন্ডোর প্রতিক্রিয়া দেখার জন্য মাপ পরিবর্তন করা হয়।  </p>

  <div>  </div>
</body>
</html>

ফলাফল

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
    width: 100%;
    height: 400px;
    background-image: url('images/satt_joy.jpg');
    background-size: cover;
    border: 1px solid teal;
}
</style>
</head>
<body>

<p>ব্রাউজার উইন্ডোর প্রতিক্রিয়া দেখার জন্য মাপ পরিবর্তন করা হয়। </p>

<div></div>
</body>
</html>

ফলাফল

ডিভাইসভেদে ভিন্ন ইমেজ প্রদর্শন

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

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

নিচে একই ইমেজকে দুইটি ডিভাইসে প্রদর্শনের জন্য দুইটি আকারে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For width smaller than 400px: */
body {
    background-repeat: no-repeat;
    background-image:url(images/satttt.jpg);
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('images/nilgiri.jpg');
    }
}
</style>
</head>
<body>

<p style="margin-top:360px;"> ব্রাউজারের width পরিবর্তন করলে ব্যাকগ্রাউন্ড ইমেজ 400PX  এ পরিবর্তিত হবে।
    </p>

</body>
</html>

ফলাফল

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
/* For device width smaller than 400px: */
body {
    background-repeat: no-repeat;
    background-image: url('images/satttt.jpg');
}

/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body {
       background-image: url('images/nilgiri.jpg');
    }
}
 </style>
 </head>
 <body>

</body>
</html>

ফলাফল

এইচটিএমএল(৫) <picture> এলিমেন্ট

এইচটিএমএল(৫) এর <picture> এলিমেন্ট ব্যবহার করে আপনি একাধিক ইমেজ যোগ করতে পারবেন।

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 </head>
 <body>

 <picture>
  <source src="images/chandpur.jpg" media="(max-width: 400px)">
   <source src="images/satt_bangla.jpg">
   <img src="images/satt_joy.jpg" alt="Banladesh" style="width:auto;">
 </picture>

 <p>ব্রাউজারের width পরিবর্তন করলে ব্যাকগ্রাউন্ড ইমেজ 400PX  এ পরিবর্তিত হবে।  </p>
</body>
</html>

ফলাফল

srcset এট্রিবিউটটি বাধ্যতামূলক এবং ইহাই ইমেজের উৎসগুলো ডিফাইন করে।

যেসব ব্রাউজারে <picture> এলিমেন্ট সাপোর্ট করেনা, তাদের জন্য আপনাকে <img> এলিমেন্টটি ডিফাইন করতে হবে।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল

সিএসএস-৩

সিএসএস রেসপন্সিভ

সিএসএস রেফারেন্স

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

width প্রোপার্টি

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

ডিভাইসভেদে ভিন্ন ইমেজ প্রদর্শন

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

এইচটিএমএল(৫) <picture> এলিমেন্ট

উদাহরণ

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য