Jos kuva on leveämpi kuin pääsisältösarake – kuten usein tapahtuu pienemmillä näytöillä – DevSite rajoittaa sen automaattisesti sarakkeen leveyteen. Jos kuvalle on asetettu sekä width että height , vain leveyden kokoa muutetaan, mikä aiheuttaa kuvan vääristymisen. Älä siksi aseta kuvan height . Tämä tarkoittaa, että sivu voi piirtää uudelleen, jos kuva latautuu hitaasti (aiheuttaa hyppyä), mutta se on parempi kuin kuva, joka ei mahdu näytölle.
Voit liittää kuvaan class="screenshot" ja antaa sille reunuksen, joka poikkeaa sen läheisestä tekstistä. Tätä käytetään yleensä kuvakaappauksissa, joissa on valkoinen tausta ja jotka muuten eksyvät sivulle. Älä käytä sitä kuviin, jotka eivät sitä tarvitse.
Kelluu tekstin vieressä
Oikealla olevassa kuvassa on myös class="attempt-right" , joka kelluu kuvan suoraan isommilla näytöillä, mutta pakottaa kuvan pystysuoraan asetteluun pienemmillä näytöillä, tableteilla ja pienemmillä näytöillä, joissa kelluminen oikealle aiheuttaisi ongelmia. Saatavilla on myös class="attempt-left" . Jos haluat käyttää attempt-left ja attempt-right yhdessä, varmista, että attempt-left -elementti tulee ensin.
Kun kuvat kelluvat, ne eivät saa ylittää 50 % sarakkeen leveydestä. Jos ne olisivat, ne skaalataan uudelleen.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Voit käyttää samoja luokkia kelluttamaan muita elementtejä, kuten <figure> joka sisältää sekä kuvan että kuvatekstin:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Tyhjennetään kelluvaa tekstiä
Voit estää tekstiä kiertymästä kelluvan elementin ympärille ja näyttämästä sen alkuperäisellä leveydellä lisäämällä clear luokan kelluvaa elementtiä seuraaviin vaikutuksiin liittyviin elementteihin.
<p class="clear">Hello world.</p>
Esimerkki selkeästä luokasta
Tässä esimerkissä toinen kappale sisältää clear luokan.
Tämä kappale kiertää kelluvan kuvan ympärille . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tällä kappaleella on selkeä luokka, eikä se kierrä kelluvan kuvan ympärille . 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.
Esimerkki ilman selkeää luokkaa
Tässä esimerkissä molemmat kappaleet kiertävät kelluvan kuvan ympärillä.
Tämä kappale kiertää kelluvan kuvan ympärille . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tämä kappale kiertää kelluvan kuvan ympärille . 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.
Tumman teeman kuvat
DevSite tarjoaa pienen joukon luokkanimiä, joita voidaan käyttää kuviin niiden ulkoasun muokkaamiseksi, kun tumma teema on käytössä.
Kuvan tummuminen
Oletuksena kaikki kuvat paitsi SVG-tiedostot ovat hieman tummempia tummalla teemalla.
Jos haluat poistaa kuvan oletustummennuksen, kun tumma teema on käytössä, lisää kuvaan suodattamaton luokka:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Kuvan kääntäminen ylösalaisin
Jos kuvissa on musta tai tumma yksivärinen väripaletti, lisää kuvaan invert luokka, jotta se näyttää valkoisen/vaalean tummassa teemassa:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Jos kyseessä on _index.yaml -sivu, lisää invert rivikohdan classname kenttään:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Erillinen tumman teeman varianttikuva
Jos haluat tarjota erillisen kuvan, joka näkyy vain, kun tumma teema on käytössä, kääri olemassa oleva <img> -elementti <picture> -elementtiin ja lisää <source> -elementti tummalle teemaversiolle.
Alla olevassa esimerkissä <picture> -elementissä on kaksi SVG-tiedostoa Google-sanamerkille. Kun tumma teema on poistettu käytöstä, <img> -elementin kuvatiedosto näytetään, ja siinä näkyy sanamerkki neljällä Googlen brändivärillä. Kun tumma teema on käytössä, <source> -elementin kuvatiedosto näytetään, jossa sanamerkki on kokonaan valkoinen eikä siinä ole merkkivärejä.
Esimerkki
Koodi
<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>
Huomautuksia
Koska tumma teema on käytössä ominaisuuslipun takana, huomioi seuraavat asiat <source> -elementin määritteistä:
<source> -elementin on sisällettävä luokka devsite-dark-theme , joka tarjoaa koukun DevSiten käyttöliittymälle mediaattribuutin ja sen arvon päivittämiseen käyttäjän valitseman tumman teeman vaihtoehdon mukaan: light , dark tai device . Mediaattribuutin arvossa on oltava (prefers-color-scheme: dark) mediakysely. Jos sinulla on jo <source> -elementtejä, joissa on media mediaattribuutissa, joko liitä olemassa olevat mediakyselyt ja (prefers-color-scheme: dark) tai lisää uusi <source> -elementti, jonka mediaattribuutin arvo on (prefers-color-scheme: dark) . media ja sen arvo poistetaan tai korvataan käyttäjän valitseman tumman teeman vaihtoehdon mukaan. Vaikka tumman teeman muunnelman kuvan tiedostonimi srcset attribuutissa voi teknisesti olla mikä tahansa, on suositeltavaa lisätä -dark-theme olemassa olevan kuvan tiedostonimeen.