Если изображение шире основного столбца контента (что часто случается на небольших экранах), 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 в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. Ut enim ad minim veniam, quis nostrum 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 quiratione 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 в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. Ut enim ad minim veniam, quis nostrum 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 quiratione 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 возможность обновлять атрибут media и его значение в зависимости от выбранного пользователем параметра темной темы: light , dark или device . Атрибут media должен включать в свое значение медиазапрос (prefers-color-scheme: dark) . Если у вас уже есть элементы <source> с media запросами в медиа-атрибуте, либо добавьте существующие медиа-запросы с помощью и (prefers-color-scheme: dark), либо добавьте новый элемент <source> , значение медиа-атрибута которого равно (prefers-color-scheme: dark) . media запрос и его значение будут удалены или заменены в зависимости от выбранного пользователем параметра темной темы. Хотя имя файла варианта изображения темной темы в атрибуте srcset технически может быть любым, рекомендуется добавить -dark-theme к существующему имени файла изображения.