Jei vaizdas yra platesnis nei pagrindinis turinio stulpelis (kaip dažnai būna mažesniuose ekranuose), „DevSite“ automatiškai apriboja jį iki stulpelio pločio. Tačiau jei paveikslėlyje nustatyti ir width , ir height atributai, keičiamas tik plotis, todėl vaizdas iškraipomas. Todėl nenustatykite vaizdo height . Tai reiškia, kad puslapis gali būti perbraižytas, jei vaizdas įkeliamas lėtai (dėl to šuolis), bet tai geriau nei vaizdas, kuris netelpa ekrane.
Vaizdui galite pritaikyti class="screenshot" kad suteiktumėte jam kraštinę, atslenkančią jį nuo šalia esančio teksto. Tai paprastai naudojama ekrano kopijoms, kurių fonas yra baltas ir kitaip pasiklysta puslapyje. Nenaudokite jo vaizdams, kuriems to nereikia.
Plaukiojantis šalia teksto
Dešinėje esančiame vaizde taip pat yra class="attempt-right" , kuris slankioja vaizdą didesniuose ekranuose, bet priverčia vaizdą išdėstyti vertikaliai mažesniuose ekranuose, planšetiniuose kompiuteriuose ir mažesniuose, kur slankiojant dešinėje kiltų problemų. Taip pat yra class="attempt-left" . Jei norite kartu naudoti attempt-left ir attempt-right , įsitikinkite, kad elementas attempt-left yra pirmas.
Kai vaizdai slankioja, jie negali viršyti 50 % stulpelio pločio. Jei taip būtų, jų skalė pakeista.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Tas pačias klases galite naudoti norėdami perkelti kitus elementus, pvz., <figure> , kurioje yra vaizdas ir antraštė:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Išvalomas slankusis tekstas
Kad tekstas neapvyniotų slankiojo elemento ir nebūtų rodomas jo pločio, paveiktiems elementams, kurie seka po slankiojo elemento, galite pridėti clear klasę.
<p class="clear">Hello world.</p>
Pavyzdys su aiškia klase
Šiame pavyzdyje antroje pastraipoje yra clear klasė.
Ši pastraipa apgaubia slankiojantį vaizdą . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ši pastraipa turi aiškią klasę ir neapima slankiojo vaizdo . 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.
Pavyzdys be aiškios klasės
Šiame pavyzdyje abi pastraipos apgaubia slankiojantį vaizdą.
Ši pastraipa apgaubia slankiojantį vaizdą . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ši pastraipa apgaubia slankiojantį vaizdą . 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.
Tamsios temos vaizdai
„DevSite“ pateikia nedidelį klasių pavadinimų rinkinį, kurį galima pritaikyti vaizdams, kad būtų pakeista jų išvaizda, kai įjungta tamsioji tema.
Vaizdo tamsinimas
Pagal numatytuosius nustatymus visi vaizdai, išskyrus SVG failus, yra šiek tiek patamsinti tamsioje temoje.
Norėdami pašalinti numatytąjį vaizdo tamsinimą, kai įjungta tamsioji tema, pridėkite prie vaizdo klasę be filtrų:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Vaizdo apvertimas
Vaizdams su juodos arba tamsios nespalvotos spalvų paletės pridėkite invert klasę, kad tamsioje temoje jis būtų rodomas baltai / šviesiai:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Jei naudojate _index.yaml puslapį, eilutės elemento classname lauke pridėkite invert :
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Atskiras tamsios temos varianto vaizdas
Jei norite pateikti atskirą vaizdą, kuris būtų rodomas tik įjungus tamsiąją temą, apvyniokite esamą <img> elementą į <picture> elementą ir pridėkite elementą <source> tamsiosios temos variantui.
Toliau pateiktame pavyzdyje yra du SVG failai, skirti „Google“ žodiniam ženklui <picture> elemente. Kai tamsi tema išjungta, elemente <img> rodomas vaizdo failas, kuriame rodomas žodis su keturiomis „Google“ prekės ženklo spalvomis. Įjungus tamsiąją temą, elemente <source> rodomas vaizdo failas, kuriame žodinis ženklas yra visiškai baltas ir neturi prekės ženklo spalvų.
Pavyzdys
Kodas
<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>
Pastabos
Kadangi tamsioji tema yra įjungta už funkcijos vėliavėlės, atkreipkite dėmesį į šiuos dalykus apie elemento <source> atributus:
Elemente <source> turi būti devsite-dark-theme klasė, kuri suteikia galimybę DevSite sąsajai atnaujinti medijos atributą ir jo vertę, atsižvelgiant į vartotojo pasirinktą tamsios temos parinktį: light , dark arba device . Medijos atributo vertėje turi būti (prefers-color-scheme: dark) medijos užklausa. Jei medijos atribute jau turite elementų <source> su media užklausomis, pridėkite esamas medijos užklausas su ir (prefers-color-scheme: dark) arba pridėkite naują elementą <source> , kurio medijos atributo reikšmė yra (prefers-color-scheme: dark) . media užklausa ir jos reikšmė bus pašalinta arba pakeista, atsižvelgiant į vartotojo pasirinktą tamsiosios temos parinktį. Nors tamsios temos varianto vaizdo failo pavadinimas atribute srcset techniškai gali būti bet koks, prie esamo vaizdo failo pavadinimo rekomenduojama pridėti -dark-theme .