Ak je obrázok širší ako hlavný stĺpec obsahu – čo sa často stáva na menších obrazovkách – DevSite ho automaticky obmedzí na šírku stĺpca. Ak má však obrázok nastavené atribúty width aj height , zmení sa iba veľkosť šírky, čo spôsobí skreslenie obrázka. Preto nenastavujte height obrazu. To znamená, že stránka sa môže prekresliť, ak sa obrázok načítava pomaly (spôsobí skok), ale je to lepšie ako obrázok, ktorý sa nezmestí na obrazovku.
Môžete použiť class="screenshot" na obrázok a dať mu orámovanie, ktoré ho odsadí od blízkeho textu. Toto sa zvyčajne používa pre snímky obrazovky, ktoré majú biele pozadie a inak sa na stránke stratia. Nepoužívajte ho pre obrázky, ktoré to nepotrebujú.
Plávajúce vedľa textu
Obrázok vpravo má tiež class="attempt-right" , ktorý na väčších obrazovkách vznáša obraz vpravo, ale na menších obrazovkách, tabletoch a menších, kde by plávajúci doprava spôsoboval problémy, núti obrázok k vertikálnemu rozloženiu. K dispozícii je aj class="attempt-left" . Ak chcete použiť attempt-left a attempt-right spolu, uistite sa, že prvok attempt-left je na prvom mieste.
Keď sú obrázky plávajúce, nemôžu presiahnuť 50 % šírky stĺpca. Ak áno, zmení sa ich mierka.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Rovnaké triedy môžete použiť na vznášanie iných prvkov, ako je napríklad <figure> ktorá obsahuje obrázok aj popis:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Vymazáva sa plávajúci text
Ak chcete zabrániť tomu, aby sa text obtekal okolo plávajúceho prvku a nezobrazoval sa v jeho natívnej šírke, môžete k ovplyvneným prvkom, ktoré nasledujú za plávajúcim prvkom, pridať clear triedu.
<p class="clear">Hello world.</p>
Príklad s jasnou triedou
V tomto príklade druhý odsek obsahuje clear triedu.
Tento odsek sa zalomí okolo plávajúceho obrázka . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tento odsek má jasnú triedu a nezaoberá sa okolo pohyblivého obrázka . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Okrem sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud cvičenie 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.
Príklad bez jasnej triedy
V tomto príklade sa oba odseky obtáčajú okolo pohyblivého obrázka.
Tento odsek sa zalomí okolo plávajúceho obrázka . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tento odsek sa zalomí okolo plávajúceho obrázka . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Okrem sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud cvičenie 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.
Obrázky s tmavým motívom
DevSite poskytuje malú sadu názvov tried, ktoré možno použiť na obrázky na úpravu ich vzhľadu, keď je povolená tmavá téma.
Stmavenie obrazu
V predvolenom nastavení sú všetky obrázky okrem súborov SVG v tmavej téme mierne stmavené.
Ak chcete odstrániť predvolené stmavenie z obrázka, keď je povolená tmavá téma, pridajte do obrázka triedu bez filtra:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Invertovanie obrázka
Pre obrázky s čiernou alebo tmavou monochromatickou farebnou paletou pridajte k obrázku invert triedu, aby sa v tmavom motíve zobrazila biela/svetlá:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Pre stránku _index.yaml pridajte invert do poľa classname pre riadkovú položku:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Samostatný obrázok variantu tmavého motívu
Ak chcete poskytnúť samostatný obrázok, ktorý sa zobrazí iba vtedy, keď je povolená tmavá téma, zabaľte existujúci prvok <img> do prvku <picture> a pridajte prvok <source> pre variant tmavej témy.
V nižšie uvedenom príklade sú dva súbory SVG pre slovnú značku Google v rámci prvku <picture> . Keď je tmavá téma vypnutá, zobrazí sa súbor obrázka v rámci prvku <img> so značkou slova so štyrmi farbami značky Google. Keď je povolená tmavá téma, zobrazí sa súbor s obrázkom v prvku <source> , kde je slovo úplne biele a nemá žiadne farby značky.
Príklad
kód
<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>
Poznámky
Keďže tmavá téma je povolená za príznakom funkcie, všimnite si nasledujúce informácie o atribútoch prvku <source> :
Prvok <source> musí obsahovať triedu devsite-dark-theme , ktorá poskytuje kľúč pre frontend DevSite na aktualizáciu atribútu média a jeho hodnoty v závislosti od možnosti tmavej témy vybratej používateľom: light , dark alebo device . Atribút media musí vo svojej hodnote obsahovať dopyt na médiá (prefers-color-scheme: dark) . Ak už máte prvky <source> s media dopytmi v atribúte media, buď pripojte existujúce mediálne dopyty pomocou a (prefers-color-scheme: dark), alebo pridajte nový prvok <source> , ktorého hodnota atribútu media je (prefers-color-scheme: dark) . media dotaz a jeho hodnota budú odstránené alebo nahradené v závislosti od možnosti tmavého motívu vybratého používateľom. Zatiaľ čo názov súboru s obrázkom variantu tmavého motívu v atribúte srcset môže byť technicky akýkoľvek, k názvu súboru existujúceho obrázka sa odporúča pridať -dark-theme .