Om en bild är bredare än kolumnen för huvudinnehåll – vilket ofta sker på mindre skärmar – begränsar DevSite den automatiskt till kolumnens bredd. Men om bilden har både width och height , ändras endast bredden, vilket gör att bilden förvrängs. Ställ därför inte in bildens height . Det betyder att sidan kan ritas om om bilden laddas långsamt (som orsakar ett hopp), men det är bättre än en bild som inte får plats på skärmen.
Du kan använda class="screenshot" på en bild för att ge den en ram som förskjuter den från närliggande text. Detta används vanligtvis för skärmdumpar som har vit bakgrund och annars går vilse på sidan. Använd det inte för bilder som inte behöver det.
Flytande bredvid text
Bilden till höger har även class="attempt-right" , som flyter bilden rätt på större skärmar, men tvingar bilden till vertikal layout på mindre skärmar, surfplattor och mindre, där flytande höger skulle orsaka problem. Även tillgängligt är class="attempt-left" . För att använda attempt-left och attempt-right tillsammans, se till att elementet attempt-left kommer först.
När bilderna är flytande kan de inte överstiga 50 % av kolumnbredden. Om de skulle göra det, skalas de om.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Du kan använda samma klasser för att flyta andra element, till exempel en <figure> som innehåller både en bild och bildtext:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Rensar flytande text
För att förhindra att text lindas runt ett flytande element och visas i dess ursprungliga bredd, kan du lägga till en clear klass till berörda element som följer det flytande elementet.
<p class="clear">Hello world.</p>
Exempel med den tydliga klassen
I det här exemplet innehåller andra stycket en clear klass.
Det här stycket omsluter den flytande bilden . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Det här stycket har en tydlig klass och lindar inte den flytande bilden . 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.
Exempel utan den tydliga klassen
I det här exemplet omsluter båda styckena den flytande bilden.
Det här stycket omsluter den flytande bilden . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Det här stycket omsluter den flytande bilden . 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 tillhandahåller en liten uppsättning klassnamn som kan användas på bilder för att ändra deras utseende när mörkt tema är aktiverat.
Bilden mörknar
Som standard är alla bilder utom SVG-filer något mörkare i mörkt tema.
För att ta bort standardmörkningen från en bild när mörkt tema är aktiverat, lägg till en no-filter klass till bilden:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Invertera en bild
För bilder med en svart eller mörk monokrom färgpalett, lägg till en invert till bilden för att få den att visa vit/ljus i mörkt tema:
<img src="/site-assets/logo-github.png" class="invert" alt="">
För en _index.yaml sida, lägg till invert i classname för ett radobjekt:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Separat mörkt temavariantbild
Om du vill tillhandahålla en separat bild som bara visas när mörkt tema är aktiverat, linda in det befintliga <img> -elementet i ett <picture> -element och lägg till ett <source> -element för varianten av mörkt tema.
I exemplet nedan finns det två SVG-filer för Google-ordmärket i ett <picture> -element. När mörkt tema är inaktiverat visas bildfilen inom <img> -elementet och visar ordmärket med de fyra Googles varumärkesfärger. När mörkt tema är aktiverat visas bildfilen inom <source> -elementet, där ordmärket är helt vitt och inte har några märkesfärger.
Exempel
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>
Anteckningar
Eftersom mörkt tema är aktiverat bakom en funktionsflagga, vänligen notera följande om <source> -elementets attribut:
Elementet <source> måste inkludera en devsite-dark-theme klass, som ger en hook för DevSites frontend för att uppdatera mediaattributet och dess värde beroende på det användarvalda alternativet för mörkt tema: light , dark eller device . Medieattributet måste innehålla en (prefers-color-scheme: dark) mediefråga i sitt värde. Om du redan har <source> -element med media i mediaattributet, lägg antingen till de befintliga mediefrågorna med och (prefers-color-scheme: dark) eller lägg till ett nytt <source> -element vars mediaattributvärde är (prefers-color-scheme: dark) . media och dess värde kommer att tas bort eller ersättas beroende på det användarvalda alternativet för mörkt tema. Även om filnamnet på den mörka temavarianten i srcset attributet tekniskt sett kan vara vad som helst, rekommenderas att lägga till -dark-theme till den befintliga bildens filnamn.