Ако дадено изображение е по-широко от основната колона със съдържание - както често се случва на по-малки екрани - 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 файла за думата на Google в елемент <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 , който предоставя кука за интерфейса на DevSite за актуализиране на медийния атрибут и неговата стойност в зависимост от избраната от потребителя опция за тъмна тема: light , dark или device . Медийният атрибут трябва да включва медийна заявка (prefers-color-scheme: dark) в своята стойност. Ако вече имате <source> елементи с media заявки в медийния атрибут, или добавете съществуващите медийни заявки с и (prefers-color-scheme: dark) или добавете нов <source> елемент, чиято стойност на медийния атрибут е (prefers-color-scheme: dark) . media заявка и нейната стойност ще бъдат премахнати или заменени в зависимост от избраната от потребителя опция за тъмна тема. Докато името на файла на изображението с вариант на тъмна тема в атрибута srcset технически може да бъде каквото и да е, препоръчва се добавянето на -dark-theme към името на файла на съществуващото изображение.