প্রতিক্রিয়াশীল চিত্রগুলি প্রায়ই srcset
বৈশিষ্ট্য ব্যবহার করে প্রয়োগ করা হয়। srcset
অ্যাট্রিবিউট হল ছবি ফাইলের নাম এবং তাদের প্রস্থ বা ঘনত্ব বর্ণনাকারীর একটি কমা দ্বারা পৃথক করা তালিকা। লেআউট পরিবর্তন রোধ করতে, srcset
ব্যবহার করে <img>
এবং <source>
ট্যাগগুলিতে width
এবং height
বৈশিষ্ট্যগুলি সেট করুন।
প্রতিক্রিয়াশীল চিত্রগুলির জন্য যা ঘনত্ব বর্ণনাকারী ব্যবহার করে:
-
src
এবংsrcset
এ তালিকাভুক্ত সমস্ত চিত্রের অনুপাত একই হওয়া উচিত। -
1x
চিত্রের মাত্রার সাথে মেলেwidth
এবংheight
বৈশিষ্ট্যগুলি সেট করুন৷ -
src
বৈশিষ্ট্য1x
চিত্র উল্লেখ করা উচিত.
প্রতিক্রিয়াশীল চিত্রগুলির জন্য যা প্রস্থ বর্ণনাকারী ব্যবহার করে:
-
src
এবংsrcset
এ তালিকাভুক্ত সমস্ত চিত্রের অনুপাত একই হওয়া উচিত। - ফলব্যাক চিত্রের মাত্রার সাথে মেলে
width
এবংheight
বৈশিষ্ট্যগুলি সেট করুন৷ - প্রয়োজনমতো ইমেজ স্টাইলিং সামঞ্জস্য করুন: কোনো CSS স্টাইলিং না থাকলে, প্রস্থ বর্ণনাকারী ব্যবহার করে এমন প্রতিক্রিয়াশীল ছবিতে
width
এবংheight
সেট করার ফলে ছবি সবসময় একই আকারে রেন্ডার হবে - এমনকিsrcset
এ তালিকাভুক্ত ছবিগুলির ভিন্ন মাত্রা থাকলেও। এই আচরণ আপনি যা চান তা নাও হতে পারে।width: 100%; height: auto;
বাwidth: 100vw; height: auto;
আপনার ইমেজ স্টাইলিং আপনি চান চাক্ষুষ চেহারা দিতে পারে.
<ছবি> ট্যাগের জন্য:
- সমস্ত
<source>
ট্যাগের জন্যwidth
এবংheight
বৈশিষ্ট্যগুলি সেট করুন:width
এবংheight
জন্য উপযুক্ত মানগুলি নির্ভর করবে কিভাবে<source>
ট্যাগsrcset
ব্যবহার করে। (srcset
এর সাথে কাজ করার তথ্যের জন্য উপরে দেখুন।) - ইমেজ স্টাইলিং সামঞ্জস্য করুন: আপনার যদি ইমেজ স্টাইলিং সামঞ্জস্য করতে হয় তবে মনে রাখবেন যে একটি
<source>
ট্যাগে স্টাইলিং যোগ করলে কোন প্রভাব পড়বে না - একটি<source>
ট্যাগ একটি খালি উপাদান । পরিবর্তে, আপনাকে সংশ্লিষ্ট<img>
ট্যাগ স্টাইল করতে হবে। -
<img>
ট্যাগেwidth
এবংheight
বৈশিষ্ট্যগুলি সেট করুন: এই মানগুলি ফলব্যাক চিত্রের অন্তর্নিহিত আকারের সাথে মেলে।
এইচটিএমএল
<!-- Using density descriptors -->
<img width="480" height="330"
srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
src="cat-1x.jpg"
alt="Photo of a cat on a green background">
<!-- Using width descriptors -->
<img width="256" height="128"
srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
src="dog-256w.jpg"
alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
<source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
<source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
<img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>