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

width প্রতিধি সংকেতক ব্যবহার করুন

যদি width প্রতিধি সংকেতককে পারসেপ্ট হিসাবে নিয়ে আসা এবং উচ্চতা সংকেতককে "auto" হিসাবে নিয়ে আসা, তাহলে চিত্রটি প্রতিক্রিয়াসম্পন্ন হয়ে বড় হবে বা ছোট হবে:

ইনস্ট্যান্স

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

মনে রাখুন যে, উপরের উদাহরণে, চিত্রটি তার মূল আকারের থেকে বড় হতে পারে। অধিকাংশ ক্ষেত্রে, বেশিরভাগ উপযুক্ত সমাধান হল প্রতিধি সংকেতককে পারসেপ্ট হিসাবে নিয়ে আসা এবং max-width প্রতিধি

max-width প্রতিধি সংকেতক ব্যবহার করুন

যদি আপনি max-width প্রতিধি সংকেতক 100% নিয়ে নিয়েন, তবে চিত্রটি আপনার চাহিদা অনুযায়ী ক্ষুদ্রিত হবে, কিন্তু কখনোই তার মূল আকারের থেকে বড় হবে না:

ইনস্ট্যান্স

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

প্রোটিস্ট ওয়েবসাইটে চিত্র যোগ করুন

ইনস্ট্যান্স

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

প্রক্ষেপণ চিত্রটি:

প্রক্ষেপণ চিত্রটিও মাপ সমায়োজন এবং সমস্তিরক্ষণ করতে পারে:

আমরা প্রদর্শিত করেছি তিনটি ভিন্ন পদ্ধতি:

1. যদি আপনি করেন: background-size প্রতিধি সংকেতক নিয়ে "contain" তো প্রক্ষেপণ চিত্রটি ক্ষুদ্রিত হবে এবং মাল্টাকান্টেন্ট অঞ্চলটির সাথে মাত্রালাভ করবে। কিন্তু চিত্রটি তার অপেক্ষাকৃত পরিমাপের অনুপাত রাখবে (চিত্রপট আকারের মধ্যে পরিমাপের সম্পর্ক):

এটি CSS কোড:

ইনস্ট্যান্স

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

2. যদি background-size যদি "100% 100%" মান নির্ধারণ করা হয়, তবে পটভূমি ছবি সম্পূর্ণ কনটেন্ট অঞ্চল আবৃত হবে:

এটি CSS কোড:

ইনস্ট্যান্স

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

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

এটি CSS কোড:

ইনস্ট্যান্স

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

বিভিন্ন ডিভাইসের জন্য ভিন্ন ছবি প্রস্তুত করুন

বড় ছবিটি বড় কম্পিউটার স্ক্রিনে সুন্দরভাবে দেখানো হবে, কিন্তু ছোট ডিভাইসে কোনও ব্যবহার করা যাবে না।কেন ছোট ছবিটির আকার করতেও বড় ছবিটি লোড করা হয়?লোড হার কমানোর জন্য বা অন্য কোনও কারণে, আপনি মিডিয়া কোরিউলার ব্যবহার করে বিভিন্ন ডিভাইসে ভিন্ন ছবি দেখাতে পারেন।

এটি একটি বড় ছবি এবং একটি ছোট ছবি এবং বিভিন্ন ডিভাইসে দেখানো হবে:

ইনস্ট্যান্স

/* 400 পিক্সেল এর কম প্রস্থতির জন্য: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 পিক্সেল এবং বড় আকারের প্রস্থতির জন্য: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

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

ইনস্ট্যান্স

/* 400 পিক্সেল এর কম আকারের ডিভাইসের জন্য: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 পিক্সেল এবং বড় আকারের ডিভাইসের জন্য: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

HTML5 <picture> উপাদান

HTML5-এ <picture> উপাদানটি আপনাকে বহুবিংশ ছবি নির্ধারণ করতে সহায়তা করে

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

38.0 13 38.0 9.1 25.0

<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 এট্রিবিউট অপশনাল, এটা CSS @media রুল মিডিয়া কোরিউলেশন পাওয়া যায়

সুঝানা:আপনাকে অসমর্থিত <picture> এলিমেন্টের ব্রাউজার নির্বাচন <img> এলিমেন্ট