Slike

Dijalog upozorenja

Ako je slika šira od stupca glavnog sadržaja - kao što se često događa na manjim zaslonima - DevSite je automatski ograničava na širinu stupca. Međutim, ako slika ima postavljene atribute width i height , mijenja se veličina samo širine, što uzrokuje izobličenje slike. Stoga nemojte postavljati height slike . To znači da se stranica može ponovno crtati ako se slika sporo učitava (uzrokujući skok), ali to je bolje od slike koja ne stane na zaslon.

Možete primijeniti class="screenshot" na sliku kako biste joj dali obrub koji je odmiče od obližnjeg teksta. Ovo se obično koristi za snimke zaslona koje imaju bijelu pozadinu i inače se izgube na stranici. Nemojte ga koristiti za slike kojima to nije potrebno.

Lebdi pored teksta

Slika desno također ima class="attempt-right" , koji pomiče sliku desno na većim zaslonima, ali prisiljava sliku na okomiti raspored na manjim zaslonima, tabletima i manjim, gdje bi plutanje desno uzrokovalo probleme. Dostupan je class="attempt-left" . Da biste zajedno koristili attempt-left i attempt-right , provjerite je li element attempt-left na prvom mjestu.

Kada slike lebde, ne smiju prelaziti 50% širine stupca. Ako hoće, preračunavaju se.

<img src="/path/to/image.png" alt="Alert dialog"
     class="screenshot attempt-right">

Možete koristiti iste klase za plutanje drugih elemenata, kao što je <figure> koja sadrži i sliku i naslov:

<figure class="attempt-right">
  <img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
  <figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>

Brisanje lebdećeg teksta

Kako biste spriječili omotavanje teksta oko plutajućeg elementa i prikaz u izvornoj širini, možete dodati clear klasu pogođenim elementima koji slijede plutajući element.

<p class="clear">Hello world.</p>

Primjer s jasnom klasom

U ovom primjeru, drugi odlomak uključuje clear klasu.

Dijalog upozorenja

Ovaj odlomak obavija lebdeću sliku . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ovaj paragraf ima jasnu klasu i ne omotava se oko plutajuće slike . 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.

Primjer bez jasne klase

U ovom primjeru, oba odlomka omataju lebdeću sliku.

Dijalog upozorenja

Ovaj odlomak obavija lebdeću sliku . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ovaj odlomak obavija lebdeću sliku . 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.

Slike tamne teme

DevSite nudi mali skup naziva klasa koji se mogu primijeniti na slike kako bi se promijenio njihov izgled kada je tamna tema omogućena.

Zatamnjenje slike

Prema zadanim postavkama, sve slike osim SVG datoteka blago su potamnjene u tamnoj temi.

Da biste uklonili zadano zatamnjivanje slike kada je tamna tema omogućena, slici dodajte klasu bez filtra:

<img src="/path/to/image.jpg" class="no-filter" alt="">

Invertiranje slike

Za slike s crnom ili tamnom monokromatskom paletom boja, dodajte invert klasu na sliku kako bi prikazala bijelo/svijetlo u tamnoj temi:

<img src="/site-assets/logo-github.png" class="invert" alt="">

Za _index.yaml stranicu, dodajte invert u polje classname za stavku retka:

- items:
  - classname: invert
    icon:
      path: /site-assets/logo-github.png

Zasebna slika varijante tamne teme

Ako želite pružiti zasebnu sliku koja se prikazuje samo kada je omogućena tamna tema, zamotajte postojeći element <img> u element <picture> i dodajte element <source> za varijantu tamne teme.

U donjem primjeru postoje dvije SVG datoteke za Google riječni žig unutar elementa <picture> . Kada je tamna tema onemogućena, prikazuje se slikovna datoteka unutar elementa <img> , koja prikazuje riječni znak s četiri boje robne marke Google. Kada je tamna tema omogućena, prikazuje se slikovna datoteka unutar elementa <source> , gdje je riječni znak potpuno bijel i nema boje robne marke.

Primjer

Kodirati

<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>

Bilješke

Budući da je tamna tema omogućena iza oznake značajke, imajte na umu sljedeće o atributima elementa <source> :

Element <source> mora uključivati ​​klasu devsite-dark-theme , koja pruža spojnicu za sučelje DevSite-a za ažuriranje medijskog atributa i njegove vrijednosti ovisno o opciji tamne teme koju je odabrao korisnik: light , dark ili device . Medijski atribut mora sadržavati (prefers-color-scheme: dark) medijski upit u svojoj vrijednosti. Ako već imate <source> elemente s media upitima u medijskom atributu, ili dodajte postojeće medijske upite s i (prefers-color-scheme: dark) ili dodajte novi <source> element čija je vrijednost medijskog atributa (prefers-color-scheme: dark) . media upit i njegova vrijednost bit će uklonjeni ili zamijenjeni ovisno o opciji tamne teme koju je odabrao korisnik. Dok naziv datoteke slike varijante tamne teme u atributu srcset tehnički može biti bilo što, preporučuje se dodavanje -dark-theme postojećem nazivu datoteke slike.