HTML <picture> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <param>
  • পরবর্তী পৃষ্ঠা <pre>

বিবরণ ও ব্যবহার

<picture> ট্যাগটি ওয়েব ডেভেলপারদের নির্দিষ্ট চিত্র সংসাধনের ক্ষেত্রে আরও স্বাধীন করে তোলে。

<picture> উপাদানটির সবচেয়ে সাধারণ ব্যবহার হল প্রতিক্রিয় ডিজাইনের শিল্প দিশা। ব্রাউজার দৃশ্যক্ষেত্রটিকে বেশি ভালোভাবে ভরাট করতে একাধিক চিত্র ডিজাইন করা যেতে পারে, এবং একটি চিত্রকে দৃশ্যক্ষেত্র প্রস্থতির উপর নির্ভর করে আকার বৃদ্ধি কিংবা কমানো হবেনা。

<picture> উপাদানটি দুটি ট্যাগ ধারণ করে: একটি বা একাধিক <source> ট্যাগ এবং <img> ট্যাগ。

ব্রাউজার বর্তমান দৃশ্যক্ষেত্র প্রস্থতির সাথে ম্যাচ করা প্রথম <source> উপাদানটি অনুসন্ধান করবে, এবং এটি সঠিক চিত্রটি (srcset বৈশিষ্ট্যে নির্ধারিত) প্রদর্শন করবে। <img> উপাদানটি হল <picture> উপাদানটির শেষতম সন্তান একটি বাধ্যতামূলক উপাদান যা কোনও source ট্যাগ ম্যাচ না হলের পরিবর্তে ব্যবহৃত হয়。

পরামর্শ:<picture> উপাদানটির কাজকর্ম হল <video> এবং <audio> একইভাবে। আপনি ভিন্ন সূত্র নির্ধারণ করতে পারেন; পছন্দ করা প্রথম সূত্রটি ব্যবহৃত হবে。

অন্যান্য দেখুন:

HTML শিক্ষাক্রম:HTML <picture> উপাদান

CSS শিক্ষাক্রম:CSS রেসপন্সিভ ডিজাইন - ছবি

উদাহরণ

<picture> ট্যাগের ব্যবহার পদ্ধতি:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

স্বয়ং প্রয়াস করুন

গ্লোবাল অ্যাট্রিবিউট

<picture> ট্যাগটি আরও HTML-তে গ্লোবাল অ্যাট্রিবিউট。

ইভেন্ট অ্যাট্রিবিউট

<picture> ট্যাগটি আরও HTML-তে ইভেন্ট অ্যাট্রিবিউট。

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

টেবিলের সংখ্যাগুলি এই ট্যাগটি পূর্ণাত্মকভাবে সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
38.0 13.0 38.0 9.1 25.0
  • পূর্ববর্তী পৃষ্ঠা <param>
  • পরবর্তী পৃষ্ঠা <pre>