Pokud je obrázek širší než sloupec hlavního obsahu – což se často stává na menších obrazovkách – DevSite jej automaticky omezí na šířku sloupce. Pokud má však obrázek nastaveny atributy width i height , změní se pouze velikost šířky, což způsobí zkreslení obrázku. Nenastavujte proto height obrázku . To znamená, že stránka se může překreslit, pokud se obrázek načítá pomalu (způsobuje skok), ale to je lepší než obrázek, který se nevejde na obrazovku.
Můžete použít class="screenshot" na obrázek a dát mu ohraničení, které jej odsadí od blízkého textu. To se obvykle používá pro snímky obrazovky, které mají bílé pozadí a jinak se na stránce ztratí. Nepoužívejte jej pro obrázky, které to nepotřebují.
Plovoucí vedle textu
Obrázek vpravo má také class="attempt-right" , který na větších obrazovkách plave obraz vpravo, ale na menších obrazovkách, tabletech a menších, kde by plovoucí doprava způsoboval problémy, nutí obraz k vertikálnímu rozložení. K dispozici je také class="attempt-left" . Chcete-li použít attempt-left a attempt-right společně, ujistěte se, že prvek attempt-left je na prvním místě.
Když jsou obrázky plovoucí, nemohou přesáhnout 50 % šířky sloupce. Pokud ano, změní se jejich měřítko.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Stejné třídy můžete použít k plavení dalších prvků, jako je <figure> obsahující jak obrázek, tak popisek:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Mazání plovoucího textu
Chcete-li zabránit tomu, aby se text obtékal kolem plovoucího prvku a nezobrazoval se v jeho přirozené šířce, můžete k ovlivněným prvkům, které následují za plovoucím prvkem, přidat clear třídu.
<p class="clear">Hello world.</p>
Příklad s jasnou třídou
V tomto příkladu druhý odstavec obsahuje clear třídu.
Tento odstavec obtéká plovoucí obrázek . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tento odstavec má jasnou třídu a neobtéká plovoucí obrázek . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Kromě 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.
Příklad bez jasné třídy
V tomto příkladu oba odstavce obtékají plovoucí obrázek.
Tento odstavec obtéká plovoucí obrázek . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tento odstavec obtéká plovoucí obrázek . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Kromě 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.
Obrázky s tmavým motivem
DevSite poskytuje malou sadu názvů tříd, které lze použít na obrázky a upravit jejich vzhled, když je povoleno tmavé téma.
Ztmavení obrazu
Ve výchozím nastavení jsou všechny obrázky kromě souborů SVG v tmavém motivu mírně ztmavené.
Chcete-li z obrázku odstranit výchozí ztmavení, když je povolen tmavý motiv, přidejte do obrázku třídu bez filtru:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Invertování obrázku
U obrázků s černou nebo tmavou monochromatickou barevnou paletou přidejte do obrázku invert třídu, aby se v tmavém motivu zobrazoval bílý/světlý:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Pro stránku _index.yaml přidejte invert do pole classname pro položku řádku:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Samostatný obrázek varianty tmavého motivu
Pokud byste chtěli poskytnout samostatný obrázek, který se zobrazí pouze při aktivovaném tmavém motivu, zabalte stávající prvek <img> do prvku <picture> a přidejte prvek <source> pro variantu tmavého motivu.
V níže uvedeném příkladu jsou dva soubory SVG pro slovní značku Google v prvku <picture> . Když je tmavý motiv vypnutý, zobrazí se soubor obrázku v prvku <img> se slovem se čtyřmi barvami značky Google. Je-li povolen tmavý motiv, zobrazí se soubor obrázku v prvku <source> , kde je slovo zcela bílé a nemá žádné značkové barvy.
Pří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
Vzhledem k tomu, že tmavý motiv je povolen za příznakem funkce, věnujte prosím pozornost atributům prvku <source> :
Element <source> musí obsahovat třídu devsite-dark-theme , která poskytuje háček pro frontend DevSite pro aktualizaci atributu media a jeho hodnoty v závislosti na uživatelem zvolené možnosti tmavého motivu: light , dark nebo device . Atribut media musí ve své hodnotě obsahovat dotaz na média (prefers-color-scheme: dark) . Pokud již máte prvky <source> s media dotazy v atributu media, buď připojte existující mediální dotazy pomocí a (prefers-color-scheme: dark), nebo přidejte nový prvek <source> , jehož hodnota atributu media je (prefers-color-scheme: dark) . media dotaz a jeho hodnota budou odstraněny nebo nahrazeny v závislosti na uživatelem vybrané možnosti tmavého motivu. Zatímco název souboru obrázku varianty tmavého motivu v atributu srcset může být technicky jakýkoli, doporučuje se přidat -dark-theme k názvu souboru existujícího obrázku.