Če je slika širša od stolpca glavne vsebine – kar se pogosto zgodi na manjših zaslonih – jo DevSite samodejno omeji na širino stolpca. Če pa ima slika nastavljena atributa width in height , se velikost spremeni le širina, kar povzroči popačenje slike. Zato ne nastavite height slike . To pomeni, da se lahko stran ponovno nariše, če se slika počasi nalaga (kar povzroči preskok), vendar je to bolje kot slika, ki se ne prilega zaslonu.
Za sliko lahko uporabite class="screenshot" da ji dodate obrobo, ki jo odmakne od bližnjega besedila. To se običajno uporablja za posnetke zaslona, ki imajo belo ozadje in se drugače izgubijo na strani. Ne uporabljajte ga za slike, ki ga ne potrebujejo.
Lebdenje poleg besedila
Slika na desni ima tudi class="attempt-right" , ki lebdi sliko desno na večjih zaslonih, vendar sili sliko v navpično postavitev na manjših zaslonih, tabličnih računalnikih in manjših, kjer bi lebdenje desno povzročilo težave. Na voljo je tudi class="attempt-left" . Če želite skupaj uporabiti attempt-left in attempt-right , se prepričajte, da je prvi element attempt-left .
Ko slike lebdijo, ne smejo presegati 50 % širine stolpca. Če bi, se prevrednotijo.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Iste razrede lahko uporabite za lebdenje drugih elementov, kot je <figure> ki vsebuje tako sliko kot napis:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Čiščenje lebdečega besedila
Če želite preprečiti, da bi se besedilo ovilo okoli lebdečega elementa in prikazalo v izvorni širini, lahko prizadetim elementom, ki sledijo lebdečemu elementu, dodate clear razred.
<p class="clear">Hello world.</p>
Primer z jasnim razredom
V tem primeru drugi odstavek vključuje clear razred.
Ta odstavek se ovije okrog lebdeče slike . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ta odstavek ima jasen razred in se ne ovija okoli lebdeče slike . 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.
Primer brez jasnega razreda
V tem primeru se oba odstavka ovijeta okoli lebdeče slike.
Ta odstavek se ovije okrog lebdeče slike . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ta odstavek se ovije okrog lebdeče slike . 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.
Slike temne teme
DevSite ponuja majhen nabor imen razredov, ki jih lahko uporabite za slike, da spremenite njihov videz, ko je omogočena temna tema.
Zatemnitev slike
Privzeto so vse slike, razen datotek SVG, rahlo zatemnjene v temni temi.
Če želite odstraniti privzeto zatemnitev slike, ko je omogočena temna tema, sliki dodajte razred brez filtra:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Obračanje slike
Za slike s črno ali temno enobarvno barvno paleto dodajte sliki invert razred, da bo prikazana bela/svetla v temni temi:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Za stran _index.yaml dodajte invert v polje classname za element vrstice:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Ločena slika različice temne teme
Če želite zagotoviti ločeno sliko, ki se prikaže samo, ko je omogočena temna tema, zavijte obstoječi element <img> v element <picture> in dodajte element <source> za različico temne teme.
V spodnjem primeru sta dve datoteki SVG za Googlov besedni znak v elementu <picture> . Ko je temna tema onemogočena, je prikazana slikovna datoteka znotraj elementa <img> , ki prikazuje besedni znak s štirimi barvami blagovne znamke Google. Ko je omogočena temna tema, se prikaže slikovna datoteka znotraj elementa <source> , kjer je besedni znak v celoti bel in nima barv blagovne znamke.
Primer
Koda
<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>
Opombe
Ker je temna tema omogočena za zastavico funkcije, upoštevajte naslednje o atributih elementa <source> :
Element <source> mora vključevati razred devsite-dark-theme , ki zagotavlja povezavo za sprednjo stran DevSite za posodobitev medijskega atributa in njegove vrednosti glede na možnost temne teme, ki jo izbere uporabnik: light , dark ali device . Medijski atribut mora v svoji vrednosti vsebovati (prefers-color-scheme: dark) medijsko poizvedbo. Če že imate elemente <source> z media poizvedbami v medijskem atributu, pripnite obstoječe medijske poizvedbe z in (prefers-color-scheme: dark) ali dodajte nov element <source> , katerega vrednost medijskega atributa je (prefers-color-scheme: dark) . media poizvedba in njena vrednost bosta odstranjeni ali zamenjani glede na možnost temne teme, ki jo izbere uporabnik. Čeprav je lahko ime datoteke slike različice temne teme v atributu srcset tehnično karkoli, je priporočljivo, da imenu datoteke obstoječe slike dodate -dark-theme .