This page was translated by the Cloud Translation API.

امیجز

الرٹ ڈائیلاگ

اگر کوئی تصویر مرکزی مواد کے کالم سے زیادہ چوڑی ہے — جیسا کہ اکثر چھوٹی اسکرینوں پر ہوتا ہے — ڈیو سائٹ خود بخود اسے کالم کی چوڑائی تک محدود کر دیتی ہے۔ تاہم، اگر تصویر میں width اور height دونوں صفات سیٹ ہیں، تو صرف چوڑائی کا سائز تبدیل کیا جاتا ہے، جس کی وجہ سے تصویر بگڑ جاتی ہے۔ نتیجتاً، تصویر کی height متعین نہ کریں۔ اس کا مطلب ہے کہ اگر تصویر لوڈ ہونے میں سست ہے تو صفحہ دوبارہ بن سکتا ہے (جس سے چھلانگ لگتی ہے)، لیکن یہ اس تصویر سے بہتر ہے جو اسکرین پر فٹ نہیں ہوتی ہے۔

آپ کسی تصویر پر class="screenshot" اطلاق کر سکتے ہیں تاکہ اسے ایک بارڈر دیا جا سکے جو اسے قریبی متن سے آف سیٹ کرتا ہے۔ یہ عام طور پر ان اسکرین شاٹس کے لیے استعمال ہوتا ہے جن کا پس منظر سفید ہوتا ہے اور بصورت دیگر صفحہ پر گم ہو جاتا ہے۔ اسے ان تصاویر کے لیے استعمال نہ کریں جن کی ضرورت نہیں ہے۔

متن کے آگے تیرتا ہے۔

دائیں طرف کی تصویر class="attempt-right" بھی ہوتا ہے، جو تصویر کو بڑی اسکرینوں پر فلوٹ کرتا ہے، لیکن تصویر کو چھوٹی اسکرینوں، ٹیبلٹس اور چھوٹی اسکرینوں پر عمودی ترتیب میں مجبور کرتا ہے، جہاں دائیں تیرنے سے مسائل پیدا ہوں گے۔ یہ بھی دستیاب ہے class="attempt-left" ۔ attempt-left اور attempt-right ایک ساتھ استعمال کرنے کے لیے، یقینی بنائیں کہ attempt-left عنصر پہلے آتا ہے۔

جب تصاویر تیرتی ہیں تو وہ کالم کی چوڑائی کے 50% سے زیادہ نہیں ہو سکتیں۔ اگر وہ چاہیں گے تو انہیں باز رکھا جائے گا۔

<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.

اس پیراگراف میں ایک واضح کلاس ہے اور یہ تیرتی ہوئی تصویر کے گرد لپیٹ نہیں ہے ۔ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 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 aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, 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.

واضح کلاس کے بغیر مثال

اس مثال میں، دونوں پیراگراف تیرتی ہوئی تصویر کے گرد لپیٹے ہوئے ہیں۔

الرٹ ڈائیلاگ

یہ پیراگراف تیرتی ہوئی تصویر کے گرد لپیٹتا ہے ۔ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 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 aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, 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> عنصر کے اندر گوگل ورڈ مارک کے لیے دو SVG فائلیں ہیں۔ جب ڈارک تھیم کو غیر فعال کر دیا جاتا ہے تو، <img> عنصر کے اندر موجود تصویری فائل ظاہر ہوتی ہے، جو گوگل برانڈ کے چار رنگوں کے ساتھ ورڈ مارک دکھاتی ہے۔ جب ڈارک تھیم کو فعال کیا جاتا ہے، تو <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 , or device ۔ میڈیا انتساب میں اپنی قدر میں ایک (prefers-color-scheme: dark) میڈیا سوال شامل ہونا چاہیے۔ اگر آپ کے پاس میڈیا وصف میں media سوالات کے ساتھ پہلے سے ہی <source> عناصر موجود ہیں، تو یا تو موجودہ میڈیا سوالات کو اور (prefers-color-scheme: dark) کے ساتھ شامل کریں یا ایک نیا <source> عنصر شامل کریں جس کی میڈیا وصف کی قدر (prefers-color-scheme: dark) ہے۔ (prefers-color-scheme: dark) ۔ media استفسار اور اس کی قدر کو صارف کے منتخب کردہ ڈارک تھیم کے آپشن کی بنیاد پر ہٹا یا تبدیل کر دیا جائے گا۔ جبکہ srcset انتساب میں ڈارک تھیم ویرینٹ امیج کا فائل نام تکنیکی طور پر کچھ بھی ہو سکتا ہے، موجودہ امیج کے فائل نام میں -dark-theme شامل کرنے کی سفارش کی جاتی ہے۔