এই ডেমো চেষ্টা করে দেখুন
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
. - বিভিন্ন ব্রাউজার আকার ব্যবহার করে অ্যাপটি পুনরায় লোড করুন। চিত্রগুলি কতটা আলাদা তা লক্ষ্য করুন: এগুলি কেবলমাত্র বিভিন্ন আকারের নয় বরং বিভিন্ন ক্রপিং এবং আকৃতির অনুপাতও।
এখানে কি হচ্ছে?
শিল্প নির্দেশনা বিভিন্ন ডিসপ্লে আকারে বিভিন্ন চিত্র দেখায়।
একটি প্রতিক্রিয়াশীল চিত্র একই চিত্রের বিভিন্ন আকার লোড করে। শিল্প নির্দেশনা এটিকে আরও এক ধাপ এগিয়ে নিয়ে যায় এবং প্রদর্শনের উপর নির্ভর করে সম্পূর্ণ ভিন্ন চিত্র লোড করে।
ভিজ্যুয়াল উপস্থাপনা উন্নত করতে শিল্প নির্দেশনা ব্যবহার করুন। উদাহরণস্বরূপ, এই ডেমোতে বিভিন্ন ইমেজ ক্রপিংগুলি নিশ্চিত করে যে আগ্রহের বিন্দু (ফুল) সবসময় বিস্তারিতভাবে দেখানো হয়, প্রদর্শন নির্বিশেষে। শিল্প নির্দেশনার সুবিধাগুলি সম্পূর্ণরূপে নান্দনিক; এটি প্রতিক্রিয়াশীল চিত্রগুলির উপর কোন কর্মক্ষমতা সুবিধা প্রদান করে না।
কোডটি দেখুন
- এই ডেমোর আর্ট ডিরেকশন কোড দেখতে
index.htmlদেখুন।
কোড কিভাবে কাজ করে
শিল্প নির্দেশনায় <picture> , <source> , এবং <img> ট্যাগ ব্যবহার করা হয়।
ছবি
<picture> ট্যাগ শূন্য বা তার বেশি <source> ট্যাগ এবং একটি <image> ট্যাগের জন্য একটি মোড়ক প্রদান করে।
উৎস
<source> ট্যাগ একটি মিডিয়া সম্পদ নির্দিষ্ট করে।
ব্রাউজারটি একটি মিডিয়া ক্যোয়ারী সহ প্রথম <source> ট্যাগ ব্যবহার করে যা সত্যে ফিরে আসে। যদি মিডিয়া ক্যোয়ারীগুলির একটিও মেলে না, ব্রাউজারটি <img> দ্বারা নির্দিষ্ট করা ছবি লোড করতে ফিরে আসে। ট্যাগ
img
<img> ট্যাগ এই কোডটিকে এমন ব্রাউজারগুলিতে কাজ করে যেগুলি <picture> ট্যাগ সমর্থন করে না।
যদি একটি ব্রাউজার <picture> ট্যাগ সমর্থন না করে, তাহলে এটি <img> ট্যাগ দ্বারা নির্দিষ্ট করা ছবি লোড করে।