Als een afbeelding breder is dan de kolom met de hoofdinhoud (zoals vaak gebeurt op kleinere schermen), beperkt DevSite deze automatisch tot de breedte van de kolom. Als voor de afbeelding echter zowel width als height zijn ingesteld, wordt alleen de breedte aangepast, waardoor de afbeelding vervormt. Stel daarom de height van de afbeelding niet in . Dit betekent dat de pagina mogelijk opnieuw wordt getekend als de afbeelding langzaam wordt geladen (waardoor er een sprong ontstaat), maar dat is beter dan een afbeelding die niet op het scherm past.
U kunt class="screenshot" op een afbeelding toepassen om deze een rand te geven die deze onderscheidt van de nabijgelegen tekst. Dit wordt meestal gebruikt voor schermafbeeldingen met een witte achtergrond die anders verloren gaan op de pagina. Gebruik het niet voor afbeeldingen die het niet nodig hebben.
Zwevend naast tekst
De afbeelding rechts heeft ook class="attempt-right" , waardoor de afbeelding op grotere schermen naar rechts zweeft, maar de afbeelding in een verticale lay-out wordt gedwongen op kleinere schermen, tablets en kleiner, waar naar rechts zweven problemen zou veroorzaken. Ook beschikbaar is class="attempt-left" . Als je attempt-left en attempt-right samen wilt gebruiken, zorg er dan voor dat het element attempt-left eerst komt.
Wanneer de afbeeldingen zwevend zijn, mogen ze niet groter zijn dan 50% van de kolombreedte. Als ze dat wel zouden doen, worden ze opnieuw geschaald.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Je kunt dezelfde klassen gebruiken om andere elementen te laten zweven, zoals een <figure> die zowel een afbeelding als een bijschrift bevat:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Zwevende tekst wissen
Om te voorkomen dat tekst rond een zwevend element loopt en op de oorspronkelijke breedte wordt weergegeven, kunt u een clear klasse toevoegen aan de getroffen elementen die op het zwevende element volgen.
<p class="clear">Hello world.</p>
Voorbeeld met de duidelijke klasse
In dit voorbeeld bevat de tweede alinea een clear klasse.
Deze paragraaf loopt rond de zwevende afbeelding . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut arbeid en dolore magna aliqua.
Deze paragraaf heeft een duidelijke klasse en loopt niet rond de zwevende afbeelding . Dit is een zeer pijnlijke beschuldiging van een voluptate velit esse cillum dolore eu fugiat nulla pariatur. De uitzondering is dat hij af en toe een niet-prodent is, maar schuldig is aan het verlaten van de taak. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas zit aspernatur aut of it aut fugit, sed quia consequuntur grote dolores eos ratione voluptatem sequi nesciunt. Het is niet zo dat het dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modieus incidunt ut arbeid en dolore magnam aliquam quaerat voluptatem.
Voorbeeld zonder de duidelijke klasse
In dit voorbeeld lopen beide alinea's rond de zwevende afbeelding.
Deze paragraaf loopt rond de zwevende afbeelding . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut arbeid en dolore magna aliqua.
Deze paragraaf loopt rond de zwevende afbeelding . Dit is een zeer pijnlijke beschuldiging van een voluptate velit esse cillum dolore eu fugiat nulla pariatur. De uitzondering is dat hij af en toe een niet-prodent is, maar schuldig is aan het verlaten van de taak. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas zit aspernatur aut of it aut fugit, sed quia consequuntur magni dolores eos ratione voluptatem sequi nesciunt. Het is niet zo dat het dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut arbeid en dolore magnam aliquam quaerat voluptatem.
Donkere themaafbeeldingen
DevSite biedt een kleine set klassennamen die op afbeeldingen kunnen worden toegepast om hun uiterlijk te wijzigen wanneer het donkere thema is ingeschakeld.
Beeld wordt donkerder
Standaard zijn alle afbeeldingen, behalve SVG-bestanden, iets donkerder in het donkere thema.
Om de standaard verduistering van een afbeelding te verwijderen wanneer het donkere thema is ingeschakeld, voegt u een klasse zonder filter toe aan de afbeelding:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Een afbeelding omkeren
Voor afbeeldingen met een zwart of donker monochroom kleurenpalet voegt u een invert klasse toe aan de afbeelding, zodat deze het thema wit/licht in donker weergeeft:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Voor een _index.yaml -pagina voegt u invert toe aan het veld classname voor een rij-item:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Afzonderlijke afbeelding van een donkere themavariant
Als u een afzonderlijke afbeelding wilt leveren die alleen wordt weergegeven als het donkere thema is ingeschakeld, plaatst u het bestaande <img> -element in een <picture> -element en voegt u een <source> -element toe voor de donkere themavariant.
In het onderstaande voorbeeld zijn er twee SVG-bestanden voor het Google-woordmerk binnen een <picture> -element. Als het donkere thema is uitgeschakeld, wordt het afbeeldingsbestand binnen het <img> -element weergegeven, met het woordmerk met de vier Google-merkkleuren. Wanneer het donkere thema is ingeschakeld, wordt het afbeeldingsbestand binnen het <source> -element weergegeven, waarbij het woordmerk volledig wit is en geen merkkleuren heeft.
Voorbeeld
Code
<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>
Opmerkingen
Omdat het donkere thema is ingeschakeld achter een functievlag, moet u rekening houden met het volgende over de kenmerken van het <source> -element:
Het <source> -element moet een devsite-dark-theme klasse bevatten, die een hook biedt voor de frontend van DevSite om het media-attribuut en de waarde ervan bij te werken, afhankelijk van de door de gebruiker geselecteerde donkere thema-optie: light , dark of device . Het media-attribuut moet een mediaquery (prefers-color-scheme: dark) in zijn waarde bevatten. Als u al <source> -elementen met media 's in het media-attribuut heeft, voegt u de bestaande mediaquery's toe met en (prefers-color-scheme: dark) of voegt u een nieuw <source> -element toe waarvan de mediaattribuutwaarde (prefers-color-scheme: dark) is (prefers-color-scheme: dark) . De media en de waarde ervan worden verwijderd of vervangen, afhankelijk van de door de gebruiker geselecteerde donkere thema-optie. Hoewel de bestandsnaam van de donkere themavariantafbeelding in het srcset -attribuut technisch gezien van alles kan zijn, wordt aanbevolen om -dark-theme toe te voegen aan de bestandsnaam van de bestaande afbeelding.