প্রতিক্রিয়াশীল ছবি এবং শিল্প নির্দেশনা

প্রতিক্রিয়াশীল চিত্রগুলি প্রায়ই 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; আপনার ইমেজ শৈলী আপনি চান চাক্ষুষ চেহারা দিতে পারে.

ছবির উপাদান

প্রতিক্রিয়াশীল <picture> উপাদান তৈরি করতে:

• সমস্ত <source> ট্যাগের জন্য width এবং height বৈশিষ্ট্য সেট করুন। এই বৈশিষ্ট্যগুলির জন্য উপযুক্ত মান নির্ভর করে কিভাবে <source> ট্যাগ srcset ব্যবহার করে।
• সংশ্লিষ্ট <img> ট্যাগ স্টাইল করে ছবি সামঞ্জস্য করুন। <source> ট্যাগটি একটি খালি উপাদান , এবং তাই শৈলীর কোন প্রভাব নেই।
• <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>