ছবি

যদি একটি ছবি মূল বিষয়বস্তুর কলামের চেয়ে চওড়া হয়—যেমনটি প্রায়শই ছোট স্ক্রিনে দেখা যায়—দেবসাইট স্বয়ংক্রিয়ভাবে সেটিকে কলামের প্রস্থে সীমাবদ্ধ করে। যাইহোক, যদি চিত্রটিতে width এবং height উভয় বৈশিষ্ট্যই সেট করা থাকে তবে শুধুমাত্র প্রস্থের আকার পরিবর্তন করা হয়, যার ফলে চিত্রটি বিকৃত হয়। ফলস্বরূপ, ছবির height সেট করবেন না। এর অর্থ হল চিত্রটি লোড হতে ধীর হলে পৃষ্ঠাটি পুনরায় আঁকতে পারে (একটি লাফের কারণ), তবে এটি এমন একটি চিত্রের চেয়ে ভাল যা স্ক্রিনে ফিট নয়৷

আপনি একটি ছবিতে class="screenshot" প্রয়োগ করতে পারেন যাতে এটি একটি সীমানা দেয় যা এটিকে কাছাকাছি পাঠ্য থেকে অফসেট করে। এটি সাধারণত সাদা ব্যাকগ্রাউন্ডযুক্ত স্ক্রিনশটগুলির জন্য ব্যবহৃত হয় এবং অন্যথায় পৃষ্ঠায় হারিয়ে যায়। এটির প্রয়োজন নেই এমন চিত্রগুলির জন্য এটি ব্যবহার করবেন না।

পাঠ্যের পাশে ভাসমান

ডানদিকের ছবিতেও রয়েছে class="attempt-right" , যা ছবিকে বৃহত্তর স্ক্রিনে ভাসিয়ে দেয়, কিন্তু ছোট স্ক্রীন, ট্যাবলেট এবং ছোট স্ক্রীনে ছবিটিকে উল্লম্ব লেআউটে বাধ্য করে, যেখানে ডানদিকে ভাসতে সমস্যা হতে পারে। এছাড়াও উপলব্ধ রয়েছে class="attempt-left" । attempt-left এবং attempt-right একসাথে ব্যবহার করতে, attempt-left উপাদানটি প্রথমে আসে তা নিশ্চিত করুন।

যখন ছবিগুলি ভাসমান থাকে, তখন সেগুলি কলামের প্রস্থের 50% এর বেশি হতে পারে না৷ যদি তারা করতে পারে, তারা rescaled হয়.

<img src="/path/to/image.png" alt="Alert dialog"
     class="screenshot attempt-right">

আপনি অন্যান্য উপাদান ভাসানোর জন্য একই ক্লাস ব্যবহার করতে পারেন, যেমন একটি <figure> একটি চিত্র এবং ক্যাপশন উভয়ই রয়েছে:

<figure class="attempt-right">
  <img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
  <figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>

ভাসমান পাঠ্য সাফ করা হচ্ছে

একটি ভাসমান উপাদানের চারপাশে মোড়ানো থেকে পাঠ্যকে আটকাতে এবং এর নেটিভ প্রস্থে প্রদর্শন করতে, আপনি প্রভাবিত উপাদানগুলিতে একটি clear শ্রেণী যুক্ত করতে পারেন যা ভাসমান উপাদান অনুসরণ করে।

<p class="clear">Hello world.</p>

স্পষ্ট ক্লাস সহ উদাহরণ

এই উদাহরণে, দ্বিতীয় অনুচ্ছেদে একটি clear শ্রেণী অন্তর্ভুক্ত রয়েছে।

এই অনুচ্ছেদটি ভাসমান চিত্রের চারপাশে মোড়ানো । Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

এই অনুচ্ছেদের একটি পরিষ্কার শ্রেণী রয়েছে এবং ভাসমান চিত্রের চারপাশে মোড়ানো হয় না । ডুইস অউট ইরিউর ডলোর ইন রিপ্রেহেন্ডারিট ইন ভোলুপ্টেট ভেলিট এসসে সিলাম ডলোরে ইউ ফুগিয়াট নুলা প্যারিয়াতুর। ব্যতীত sint occaecat cupidatat non proident, Sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur or odit or fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. এটির জন্য একটি ভাল কাজ করা যেতে পারে, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non Numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

স্পষ্ট শ্রেণী ছাড়া উদাহরণ

এই উদাহরণে, উভয় অনুচ্ছেদ ভাসমান চিত্রের চারপাশে মোড়ানো।

এই অনুচ্ছেদটি ভাসমান চিত্রের চারপাশে মোড়ানো । Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

এই অনুচ্ছেদটি ভাসমান চিত্রের চারপাশে মোড়ানো । ডুইস অউট ইরিউর ডলোর ইন রিপ্রেহেন্ডারিট ইন ভোলুপ্টেট ভেলিট এসসে সিলাম ডলোরে ইউ ফুগিয়াট নুলা প্যারিয়াতুর। ব্যতীত sint occaecat cupidatat non proident, Sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur or odit or fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. এটির জন্য একটি ভাল কাজ করা যেতে পারে, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non Numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

গাঢ় থিম ইমেজ

DevSite ক্লাসনামের একটি ছোট সেট প্রদান করে যেগুলি অন্ধকার থিম সক্ষম করা থাকলে তাদের চেহারা পরিবর্তন করতে চিত্রগুলিতে প্রয়োগ করা যেতে পারে।

ছবি অন্ধকার করা

ডিফল্টরূপে, SVG ফাইলগুলি ছাড়া সমস্ত ছবি অন্ধকার থিমে সামান্য অন্ধকার করা হয়।

অন্ধকার থিম সক্রিয় থাকা অবস্থায় একটি চিত্র থেকে ডিফল্ট অন্ধকার অপসারণ করতে, ছবিতে একটি নো-ফিল্টার ক্লাস যুক্ত করুন:

<img src="/path/to/image.jpg" class="no-filter" alt="">

একটি ইমেজ উল্টানো

একটি কালো বা গাঢ় একরঙা রঙের প্যালেট সহ চিত্রগুলির জন্য, চিত্রটিতে একটি invert শ্রেণী যুক্ত করুন যাতে এটি অন্ধকার থিমে সাদা/আলো প্রদর্শন করতে পারে:

<img src="/site-assets/logo-github.png" class="invert" alt="">

একটি _index.yaml পৃষ্ঠার জন্য, একটি সারি আইটেমের জন্য classname ক্ষেত্রে invert দিন:

- items:
  - classname: invert
    icon:
      path: /site-assets/logo-github.png

আলাদা ডার্ক থিম ভেরিয়েন্ট ইমেজ

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

নীচের উদাহরণে, একটি <picture> উপাদানের মধ্যে Google ওয়ার্ডমার্কের জন্য দুটি SVG ফাইল রয়েছে। যখন অন্ধকার থিম অক্ষম করা হয়, তখন <img> উপাদানের মধ্যে থাকা চিত্র ফাইলটি প্রদর্শিত হয়, চারটি Google ব্র্যান্ডের রঙের সাথে ওয়ার্ডমার্ক দেখায়। যখন অন্ধকার থিম সক্ষম করা হয়, তখন <source> উপাদানের মধ্যে থাকা চিত্র ফাইলটি প্রদর্শিত হয়, যেখানে ওয়ার্ডমার্ক সম্পূর্ণ সাদা এবং কোন ব্র্যান্ডের রং নেই।

উদাহরণ

কোড

<picture>
  <source
    srcset="/devsite/images/google-dark-theme.svg"
    media="(prefers-color-scheme: dark)"
    class="devsite-dark-theme"
    alt="">
  <img src="/devsite/images/google.svg" alt="">
</picture>

নোট

যেহেতু একটি বৈশিষ্ট্য পতাকার পিছনে অন্ধকার থিম সক্ষম করা আছে, অনুগ্রহ করে <source> উপাদানের বৈশিষ্ট্যগুলি সম্পর্কে নিম্নলিখিতগুলি নোট করুন:

<source> উপাদানটিতে অবশ্যই একটি devsite-dark-theme ক্লাস অন্তর্ভুক্ত থাকতে হবে, যা মিডিয়া অ্যাট্রিবিউট আপডেট করার জন্য DevSite-এর ফ্রন্টএন্ডের জন্য একটি হুক প্রদান করে এবং ব্যবহারকারী-নির্বাচিত অন্ধকার থিম বিকল্পের উপর নির্ভর করে এর মান: light , dark বা device । মিডিয়া অ্যাট্রিবিউটের মানটিতে অবশ্যই একটি (prefers-color-scheme: dark) মিডিয়া ক্যোয়ারী অন্তর্ভুক্ত করতে হবে। মিডিয়া অ্যাট্রিবিউটে media ক্যোয়ারী সহ আপনার যদি ইতিমধ্যেই <source> উপাদান থাকে, তাহলে হয় বিদ্যমান মিডিয়া কোয়েরিগুলিকে এবং (prefers-color-scheme: dark) যুক্ত করুন অথবা একটি নতুন <source> উপাদান যোগ করুন যার মিডিয়া বৈশিষ্ট্যের মান (prefers-color-scheme: dark) । ব্যবহারকারী-নির্বাচিত অন্ধকার থিম বিকল্পের উপর নির্ভর করে media ক্যোয়ারী এবং এর মান সরানো বা প্রতিস্থাপন করা হবে। srcset অ্যাট্রিবিউটে ডার্ক থিম ভেরিয়েন্ট ইমেজের ফাইলের নাম টেকনিক্যালি যেকোনও হতে পারে, বিদ্যমান ইমেজের ফাইল নামের সাথে -dark-theme যুক্ত করার পরামর্শ দেওয়া হয়।