Dacă o imagine este mai lată decât coloana principală de conținut - așa cum se întâmplă adesea pe ecranele mai mici - DevSite o constrânge automat la lățimea coloanei. Cu toate acestea, dacă imaginea are setate atât atributele width cât și height , numai lățimea este redimensionată, determinând distorsionarea imaginii. În consecință, nu setați height imaginii . Aceasta înseamnă că pagina se poate redesena dacă imaginea se încarcă lent (care provoacă un salt), dar este mai bine decât o imagine care nu se potrivește pe ecran.
Puteți aplica class="screenshot" unei imagini pentru a-i oferi un chenar care să o depășească față de textul din apropiere. Acesta este de obicei folosit pentru capturi de ecran care au fundal alb și se pierd altfel pe pagină. Nu-l utilizați pentru imagini care nu au nevoie de el.
Plutitoare lângă text
Imaginea din dreapta are, de asemenea, class="attempt-right" , care plutește imaginea chiar pe ecrane mai mari, dar forțează imaginea în aspect vertical pe ecrane mai mici, tablete și mai mici, unde plutirea în dreapta ar cauza probleme. De asemenea, este disponibil class="attempt-left" . Pentru a utiliza împreună attempt-left și attempt-right , asigurați-vă că elementul attempt-left este primul.
Când imaginile plutesc, acestea nu pot depăși 50% din lățimea coloanei. Dacă ar fi, acestea sunt redimensionate.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Puteți folosi aceleași clase pentru a pluti alte elemente, cum ar fi o <figure> care conține atât o imagine, cât și o legendă:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Stergerea textului flotant
Pentru a preveni încadrarea textului în jurul unui element flotant și afișarea la lățimea sa nativă, puteți adăuga o clasă clear elementelor afectate care urmează elementului flotant.
<p class="clear">Hello world.</p>
Exemplu cu clasa clară
În acest exemplu, al doilea paragraf include o clasă clear .
Acest paragraf se înfășoară în jurul imaginii plutitoare . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Acest paragraf are o clasă clară și nu se înfășoară în jurul imaginii plutitoare . 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.
Exemplu fără clasa clară
În acest exemplu, ambele paragrafe se înfășoară în jurul imaginii plutitoare.
Acest paragraf se înfășoară în jurul imaginii plutitoare . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Acest paragraf se înfășoară în jurul imaginii plutitoare . 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.
Imagini cu tema întunecată
DevSite oferă un set mic de nume de clasă care pot fi aplicate imaginilor pentru a le modifica aspectul atunci când tema întunecată este activată.
Întunecarea imaginii
În mod implicit, toate imaginile, cu excepția fișierelor SVG, sunt ușor întunecate în tema întunecată.
Pentru a elimina întunecarea implicită dintr-o imagine când tema întunecată este activată, adăugați o clasă fără filtru la imagine:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Inversarea unei imagini
Pentru imagini cu o paletă de culori neagră sau monocromă închisă, adăugați o clasă invert imaginii pentru ca aceasta să afișeze o temă alb/luminoasă în întuneric:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Pentru o pagină _index.yaml , adăugați invert la câmpul classname pentru un element rând:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Separați imaginea variantă a temei întunecate
Dacă doriți să furnizați o imagine separată care se afișează numai când este activată tema întunecată, înfășurați elementul <img> existent într-un element <picture> și adăugați un element <source> pentru varianta temei întunecate.
În exemplul de mai jos, există două fișiere SVG pentru marca de cuvânt Google într-un element <picture> . Când tema întunecată este dezactivată, este afișat fișierul imagine din elementul <img> , arătând marca de cuvânt cu cele patru culori ale mărcii Google. Când tema întunecată este activată, este afișat fișierul imagine din elementul <source> , unde marca de cuvânt este în întregime albă și nu are culori de marcă.
Exemplu
Cod
<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>
Note
Deoarece tema întunecată este activată în spatele unui semnalizator de caracteristică, rețineți următoarele despre atributele elementului <source> :
Elementul <source> trebuie să includă o clasă devsite-dark-theme , care oferă un cârlig pentru interfața DevSite pentru a actualiza atributul media și valoarea acestuia în funcție de opțiunea de temă întunecată selectată de utilizator: light , dark sau device . Atributul media trebuie să includă o interogare media (prefers-color-scheme: dark) în valoarea sa. Dacă aveți deja elemente <source> cu interogări media în atributul media, fie adăugați interogările media existente cu și (prefers-color-scheme: dark) sau adăugați un nou element <source> a cărui valoare a atributului media este (prefers-color-scheme: dark) . Interogarea media și valoarea acesteia vor fi eliminate sau înlocuite în funcție de opțiunea de temă întunecată selectată de utilizator. În timp ce numele de fișier al imaginii variantei temei întunecate din atributul srcset poate fi orice, din punct de vedere tehnic, se recomandă adăugarea -dark-theme la numele fișierului imaginii existente.