Якщо зображення ширше за стовпець основного вмісту (як це часто буває на невеликих екранах), 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
У цьому прикладі другий абзац містить 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>
для варіанту темної теми.
У наведеному нижче прикладі в елементі <picture>
є два файли SVG для словесного знака Google. Якщо темну тему вимкнено, відображається файл зображення в елементі <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)
. Якщо у вас уже є елементи <source>
із media
-запитами в атрибуті media, додайте наявні медіа-запити за допомогою та (prefers-color-scheme: dark) або додайте новий елемент <source>
зі значенням атрибута media (prefers-color-scheme: dark)
. media
запит і його значення буде видалено або замінено залежно від вибраного користувачем параметра темної теми. Хоча назва файлу зображення варіанту темної теми в атрибуті srcset
технічно може бути будь-якою, рекомендується додати -dark-theme
до назви файлу існуючого зображення.