Hvis et bilde er bredere enn hovedinnholdskolonnen – som ofte skjer på mindre skjermer – begrenser DevSite det automatisk til kolonnens bredde. Men hvis bildet har både width
og height
angitt, endres kun bredden, noe som fører til at bildet forvrenges. Følgelig, ikke still inn bildets height
. Dette betyr at siden kan tegnes på nytt hvis bildet er tregt med å laste (forårsaker et hopp), men det er bedre enn et bilde som ikke får plass på skjermen.
Du kan bruke class="screenshot"
på et bilde for å gi det en kantlinje som forskyver det fra nærliggende tekst. Dette brukes vanligvis for skjermbilder som har hvit bakgrunn og ellers blir borte på siden. Ikke bruk det til bilder som ikke trenger det.
Flytende ved siden av tekst
Bildet til høyre har også class="attempt-right"
, som flyter bildet rett på større skjermer, men tvinger bildet inn i vertikal layout på mindre skjermer, nettbrett og mindre, der flytende høyre ville forårsake problemer. class="attempt-left"
er også tilgjengelig. For å bruke attempt-left
og attempt-right
sammen, sørg for at attempt-left
-elementet kommer først.
Når bildene er flytende, kan de ikke overstige 50 % av kolonnebredden. Hvis de ville, skaleres de på nytt.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Du kan bruke de samme klassene til å flyte andre elementer, for eksempel en <figure>
som inneholder både et bilde og en bildetekst:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Fjerner flytende tekst
For å forhindre at tekst går rundt et flytende element og vises i dets opprinnelige bredde, kan du legge til en clear
klasse til berørte elementer som følger det flytende elementet.
<p class="clear">Hello world.</p>
Eksempel med den klare klassen
I dette eksemplet inkluderer andre ledd en clear
klasse.
Dette avsnittet går rundt det flytende bildet . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dette avsnittet har en tydelig klasse og omslutter ikke det flytende bildet . 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.
Eksempel uten den klare klassen
I dette eksemplet går begge avsnittene rundt det flytende bildet.
Dette avsnittet går rundt det flytende bildet . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dette avsnittet går rundt det flytende bildet . 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.
Mørkt temabilder
DevSite gir et lite sett med klassenavn som kan brukes på bilder for å endre utseendet når mørkt tema er aktivert.
Bildet blir mørkere
Som standard er alle bilder unntatt SVG-filer litt mørkere i mørkt tema.
For å fjerne standard mørklegging fra et bilde når mørkt tema er aktivert, legg til en no-filter klasse til bildet:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Invertering av et bilde
For bilder med en svart eller mørk monokrom fargepalett, legg til en invert
til bildet for å få det til å vise hvitt/lys i mørkt tema:
<img src="/site-assets/logo-github.png" class="invert" alt="">
For en _index.yaml
-side, legg til invert
i classname
for et radelement:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Separat mørkt temavariantbilde
Hvis du vil gi et eget bilde som bare vises når mørkt tema er aktivert, pakk det eksisterende <img>
-elementet inn i et <picture>
-element og legg til et <source>
-element for varianten av mørkt tema.
I eksemplet nedenfor er det to SVG-filer for Google-ordmerket i et <picture>
-element. Når mørkt tema er deaktivert, vises bildefilen i <img>
-elementet, og viser ordmerket med de fire Google-merkefargene. Når mørkt tema er aktivert, vises bildefilen i <source>
-elementet, der ordmerket er helt hvitt og ikke har noen merkefarger.
Eksempel
Kode
<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>
Notater
Fordi mørkt tema er aktivert bak et funksjonsflagg, vær oppmerksom på følgende om <source>
-elementets attributter:
<source>
-elementet må inkludere en devsite-dark-theme
klasse, som gir en hook for DevSites grensesnitt for å oppdatere medieattributtet og dets verdi avhengig av det brukervalgte alternativet for mørkt tema: light
, dark
eller device
. Medieattributtet må inkludere et (prefers-color-scheme: dark)
mediesøk i verdien. Hvis du allerede har <source>
-elementer med media
i medieattributtet, kan du enten legge til de eksisterende mediespørringene med og (prefers-color-scheme: dark) eller legge til et nytt <source>
-element hvis medieattributtverdi er (prefers-color-scheme: dark)
. media
og dens verdi vil bli fjernet eller erstattet avhengig av det brukervalgte alternativet for mørkt tema. Mens filnavnet på det mørke temavarianten i srcset
attributtet teknisk sett kan være hva som helst, anbefales det å legge til -dark-theme
til det eksisterende bildets filnavn.