تصاویر

اگر یک تصویر عریض‌تر از ستون محتوای اصلی باشد - همانطور که اغلب در صفحه‌های کوچکتر اتفاق می‌افتد - DevSite به طور خودکار آن را به عرض ستون محدود می‌کند. با این حال، اگر تصویر دارای هر دو ویژگی 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.

مثال بدون کلاس واضح

در این مثال، هر دو پاراگراف در اطراف تصویر شناور قرار می گیرند.

این پاراگراف به دور تصویر شناور می‌پیچد . 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.

تصاویر تم تیره

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 ، invert به قسمت classname برای آیتم ردیف اضافه کنید:

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

تصویر متفاوت با تم تیره مجزا

اگر می‌خواهید یک تصویر جداگانه ارائه کنید که فقط زمانی نمایش داده شود که تم تیره فعال است، عنصر <img> موجود را در یک عنصر <picture> بپیچید و یک عنصر <source> را برای نوع تم تیره اضافه کنید.

در مثال زیر، دو فایل SVG برای علامت کلمه گوگل در یک عنصر <picture> وجود دارد. وقتی تم تیره غیرفعال است، فایل تصویری در عنصر <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 باشد، که یک قلاب برای frontend DevSite برای به روز رسانی ویژگی رسانه و مقدار آن بسته به گزینه تم تاریک انتخاب شده توسط کاربر فراهم می کند: light ، dark ، یا device . مشخصه رسانه باید شامل یک پرس و جو رسانه (prefers-color-scheme: dark) در مقدار خود باشد. اگر قبلاً عناصر <source> با پرس و جوهای media در ویژگی رسانه دارید، یا پرس و جوهای رسانه موجود را با و (prefers-color-scheme: dark) اضافه کنید یا یک عنصر <source> جدید اضافه کنید که مقدار مشخصه رسانه آن (prefers-color-scheme: dark) است. (prefers-color-scheme: dark) . پرس و جو media و مقدار آن بسته به گزینه تم تاریک انتخاب شده توسط کاربر حذف یا جایگزین خواهد شد. در حالی که نام فایل تصویر نوع تم تیره در ویژگی srcset از نظر فنی می تواند هر چیزی باشد، اضافه کردن -dark-theme به نام فایل تصویر موجود توصیه می شود.