Jeśli obraz jest szerszy niż kolumna głównej treści (co często zdarza się na mniejszych ekranach), DevSite automatycznie ogranicza go do szerokości kolumny. Jeśli jednak obraz ma ustawione atrybuty width i height, zmienia się tylko jego szerokość, co powoduje zniekształcenie obrazu. Dlatego nie ustawiaj height dla obrazu. Oznacza to, że strona może się ponownie narysować, jeśli obraz ładuje się wolno (co powoduje przeskakiwanie), ale jest to lepsze niż obraz, który nie mieści się na ekranie.
Możesz zastosować narzędzie class="screenshot" do obrazu, aby nadać mu obramowanie, które odróżnia go od znajdującego się obok tekstu. Jest to zwykle używane w przypadku zrzutów ekranu z białym tłem, które w przeciwnym razie byłyby niewidoczne na stronie. Nie używaj go w przypadku obrazów, które nie wymagają tego typu informacji.
unosząc się obok tekstu,
Obraz po prawej stronie ma też atrybut class="attempt-right", który na większych ekranach przesuwa obraz w prawo, ale na mniejszych ekranach, takich jak tablety i mniejsze urządzenia, powoduje, że obraz jest wyświetlany w układzie pionowym, ponieważ przesuwanie w prawo mogłoby spowodować problemy. Dostępne jest też class="attempt-left". Aby używać elementów attempt-left i attempt-right razem, upewnij się, że element attempt-left jest podany jako pierwszy.
Obrazy nie mogą zajmować więcej niż 50% szerokości kolumny. Jeśli tak, są one ponownie skalowane.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Możesz używać tych samych klas do umieszczania innych elementów, takich jak <figure> zawierające obraz i podpis:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Wyczyszczenie tekstów wycentrowanych
Aby tekst nie był przenoszony na następną linię w elementach wycentrowanych i wyświetlany w szerokości domyślnej, możesz dodać klasę clear do elementów, które następują po elemencie wyśrodkowanym.
<p class="clear">Hello world.</p>
Przykład z klasą o przezroczystym tle
W tym przykładzie drugi akapit zawiera klasę clear.
Ten akapit jest osadzony wokół obrazu Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ten akapit ma wyraźną klasę i nie jest przenoszony na marginesy obrazu. 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.
Przykład bez klasy o czystej treści
W tym przykładzie oba akapity są zawijane wokół obrazu.
Ten akapit jest osadzony wokół obrazu Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ten akapit jest osadzony wokół obrazu 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.
Obrazy w ciemnym motywie
W DevSite jest dostępny mały zestaw nazw klas, które można zastosować do obrazów, aby zmodyfikować ich wygląd po włączeniu ciemnego motywu.
przyciemnianie obrazu,
Domyślnie wszystkie obrazy oprócz plików SVG są w ciemnym motywie nieco przyciemnione.
Aby usunąć domyślne przyciemnienie obrazu po włączeniu ciemnego motywu, dodaj do obrazu klasę no-filter:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Odwracanie obrazu
W przypadku obrazów z czarną lub ciemną monochromatyczną paletą kolorów dodaj do obrazu klasę invert, aby wyświetlał się on w kolorze białym lub jasnym w ciemnym motywie:
<img src="/site-assets/logo-github.png" class="invert" alt="">
W przypadku strony _index.yaml dodaj invert do pola classname elementu wiersza:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
oddzielny obraz w wersji ciemnej,
Jeśli chcesz podać osobny obraz, który będzie wyświetlany tylko wtedy, gdy włączony jest ciemny motyw, owiń istniejący element <img> elementem <picture> i dodaj element <source> dla wariantu ciemnego motywu.
W przykładzie poniżej w elemencie <picture> znajdują się 2 pliki SVG logotypu Google. Gdy ciemny motyw jest wyłączony, wyświetlany jest plik obrazu w elemencie <img>, który zawiera logotyp z 4 kolorami marki Google. Gdy włączony jest ciemny motyw, wyświetla się plik obrazu w elemencie <source>, w którym logo jest całkowicie białe i nie ma kolorów marki.
Przykład
Kod
<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>
Uwagi
Ponieważ ciemny motyw jest włączony za pomocą flagi funkcji, pamiętaj o tych kwestiach dotyczących atrybutów elementu <source>:
Element <source> musi zawierać klasę devsite-dark-theme, która zapewnia front-endowi DevSite możliwość aktualizowania atrybutu media i jego wartości w zależności od wybranej przez użytkownika opcji motywu ciemnego: light, dark lub device.
Atrybut media musi zawierać w swojej wartości zapytanie o multimedia (prefers-color-scheme: dark).
Jeśli masz już elementy <source> z zapytaniami media w atrybucie media, dodaj do istniejących zapytań o media ciąg (preferuje-schemat-koloru: ciemny) lub dodaj nowy element <source>, którego wartość atrybutu media to (prefers-color-scheme: dark). Zapytanie media i jego wartość zostaną usunięte lub zastąpione w zależności od wybranej przez użytkownika ciemnej motywy.
Nazwa pliku obrazu w wersji ciemnego motywu w atributecie srcset może teoretycznie być dowolna, ale zalecamy dodanie do nazwy istniejącego obrazu sufiksu -dark-theme.