Hvis et billede er bredere end hovedindholdskolonnen - som det ofte sker på mindre skærme - begrænser DevSite det automatisk til kolonnens bredde. Men hvis billedet har indstillet både width og height , er det kun bredden, der ændres, hvilket får billedet til at forvrænge. Indstil derfor ikke billedets height . Det betyder, at siden muligvis gentegner, hvis billedet er langsomt med at indlæse (og forårsager et hop), men det er bedre end et billede, der ikke passer på skærmen.
Du kan anvende class="screenshot" på et billede for at give det en kant, der forskyder det fra nærliggende tekst. Dette bruges typisk til skærmbilleder, der har hvid baggrund og ellers bliver væk på siden. Brug det ikke til billeder, der ikke har brug for det.
Svævende ved siden af tekst
Billedet til højre har også class="attempt-right" , som svæver billedet lige på større skærme, men tvinger billedet til lodret layout på mindre skærme, tablets og mindre, hvor svævende højre ville give problemer. Også tilgængelig er class="attempt-left" . For at bruge attempt-left og attempt-right sammen, skal du sørge for, at elementet attempt-left kommer først.
Når billederne er flydende, må de ikke overstige 50 % af kolonnebredden. Hvis de ville, omskaleres de.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Du kan bruge de samme klasser til at flyde andre elementer, såsom en <figure> der indeholder både et billede og billedtekst:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Rydning af flydende tekst
For at forhindre tekst i at ombrydes omkring et flydende element og vises i dets oprindelige bredde, kan du tilføje en clear klasse til berørte elementer, der følger det flydende element.
<p class="clear">Hello world.</p>
Eksempel med den klare klasse
I dette eksempel indeholder andet afsnit en clear klasse.
Dette afsnit ombrydes omkring det flydende billede . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dette afsnit har en klar klasse og omslutter ikke det flydende billede . 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. Ud 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 uden den klare klasse
I dette eksempel ombrydes begge afsnit omkring det flydende billede.
Dette afsnit ombrydes omkring det flydende billede . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dette afsnit ombrydes omkring det flydende billede . 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. Ud 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.
Billeder med mørkt tema
DevSite giver et lille sæt klassenavne, der kan anvendes på billeder for at ændre deres udseende, når mørkt tema er aktiveret.
Billedet bliver mørkere
Som standard er alle billeder undtagen SVG-filer lidt mørkere i mørkt tema.
For at fjerne standardmørkningen fra et billede, når mørkt tema er aktiveret, skal du tilføje en no-filter klasse til billedet:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Invertering af et billede
For billeder med en sort eller mørk monokrom farvepalet skal du tilføje en invert til billedet for at få det til at vise hvidt/lys i mørkt tema:
<img src="/site-assets/logo-github.png" class="invert" alt="">
For en _index.yaml side skal du tilføje invert til classname for et rækkeelement:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Separat mørkt temavariantbillede
Hvis du gerne vil give et separat billede, der kun vises, når mørkt tema er aktiveret, skal du pakke det eksisterende <img> -element ind i et <picture> -element og tilføje et <source> -element til varianten af mørkt tema.
I eksemplet nedenfor er der to SVG-filer til Google-ordmærket i et <picture> -element. Når mørkt tema er deaktiveret, vises billedfilen i <img> -elementet og viser ordmærket med de fire Google-mærkefarver. Når mørkt tema er aktiveret, vises billedfilen i <source> -elementet, hvor ordmærket er helt hvidt og ikke har nogen mærkefarver.
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>
Noter
Fordi mørkt tema er aktiveret bag et featureflag, skal du være opmærksom på følgende om <source> -elementets attributter:
Elementet <source> skal inkludere en devsite-dark-theme klasse, som giver en hook til DevSites frontend for at opdatere medieattributten og dens værdi afhængigt af den brugervalgte mørke temaindstilling: light , dark eller device . Medieattributten skal inkludere en (prefers-color-scheme: dark) medieforespørgsel i sin værdi. Hvis du allerede har <source> -elementer med media i medieattributten, skal du enten tilføje de eksisterende medieforespørgsler med og (prefers-color-scheme: dark) eller tilføje et nyt <source> -element, hvis medieattributværdi er (prefers-color-scheme: dark) . media og dens værdi vil blive fjernet eller erstattet afhængigt af den brugervalgte mørke temaindstilling. Mens filnavnet på det mørke temavariantbillede i srcset -attributten teknisk set kan være hvad som helst, anbefales det at tilføje -dark-theme til det eksisterende billedes filnavn.