Attēli

Brīdinājuma dialoglodziņš

Ja attēls ir platāks par galveno satura kolonnu (kā tas bieži notiek mazākos ekrānos), DevSite to automātiski ierobežo kolonnas platumā. Tomēr, ja attēlam ir iestatīti gan width , gan height atribūti, tiek mainīts tikai platuma izmērs, izraisot attēla kropļojumus. Līdz ar to neiestatiet attēla height . Tas nozīmē, ka lapa var tikt pārzīmēta, ja attēls tiek ielādēts lēni (izraisot lēcienu), taču tas ir labāk nekā attēls, kas neietilpst ekrānā.

Attēlam varat lietot class="screenshot" lai piešķirtu tam apmali, kas to nobīda no blakus esošā teksta. To parasti izmanto ekrānuzņēmumiem, kuriem ir balts fons un kuri citādi pazūd lapā. Neizmantojiet to attēliem, kuriem tas nav vajadzīgs.

Peldošs blakus tekstam

Pa labi redzamajam attēlam ir arī class="attempt-right" , kas uzpeld attēlu tieši uz lielākiem ekrāniem, bet piespiež attēlu vertikālā izkārtojumā mazākos, planšetdatoros un mazākos ekrānos, kur peldēšana pa labi radītu problēmas. Pieejams arī class="attempt-left" . Lai izmantotu attempt-left un attempt-right , vispirms ir jābūt elementam attempt-left .

Kad attēli peld, tie nedrīkst pārsniegt 50% no kolonnas platuma. Ja viņi to darītu, to mērogs tiek mainīts.

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

Varat izmantot tās pašas klases, lai peldētu citus elementus, piemēram, <figure> kurā ir gan attēls, gan paraksts:

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

Notiek peldošā teksta notīrīšana

Lai teksts netiktu apvilkts ap peldošu elementu un netiktu parādīts tā sākotnējā platumā, ietekmētajiem elementiem, kas seko peldošajam elementam, varat pievienot clear klasi.

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

Piemērs ar skaidru klasi

Šajā piemērā otrajā rindkopā ir iekļauta clear klase.

Brīdinājuma dialoglodziņš

Šī rindkopa aptver peldošo attēlu . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Šai rindkopai ir skaidra klase, un tā neaptver peldošo attēlu . 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.

Piemērs bez skaidras klases

Šajā piemērā abas rindkopas apņem peldošo attēlu.

Brīdinājuma dialoglodziņš

Šī rindkopa aptver peldošo attēlu . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Šī rindkopa aptver peldošo attēlu . 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.

Tumšo tēmu attēli

DevSite nodrošina nelielu klašu nosaukumu kopu, ko var lietot attēliem, lai mainītu to izskatu, kad ir iespējots tumšais motīvs.

Attēla aptumšošana

Pēc noklusējuma visi attēli, izņemot SVG failus, ir nedaudz aptumšoti tumšā motīvā.

Lai noņemtu attēla noklusējuma aptumšojumu, kad ir iespējots tumšais motīvs, pievienojiet attēlam klasi bez filtra.

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

Attēla apvēršana

Attēliem ar melnu vai tumšu vienkrāsainu krāsu paleti pievienojiet attēlam invert klasi, lai tas tiktu rādīts baltā/gaišā tumšā motīvā:

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

Lapai _index.yaml rindas vienuma classname laukam pievienojiet invert :

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

Atsevišķs tumšās tēmas varianta attēls

Ja vēlaties nodrošināt atsevišķu attēlu, kas tiek rādīts tikai tad, kad ir iespējots tumšais motīvs, ietiniet esošo <img> elementu elementā <picture> un pievienojiet elementu <source> tumšā motīva variantam.

Tālāk esošajā piemērā ir divi SVG faili Google vārdu zīmei elementā <picture> . Ja tumšais motīvs ir atspējots, elementā <img> tiek parādīts attēla fails, kurā redzama vārda zīme ar četrām Google zīmola krāsām. Ja ir iespējots tumšais motīvs, tiek parādīts attēla fails elementā <source> , kur vārda zīme ir pilnībā balta un tai nav zīmola krāsu.

Piemērs

Kods

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

Piezīmes

Tā kā aiz objekta karoga ir iespējots tumšais motīvs, lūdzu, ņemiet vērā tālāk norādīto informāciju par elementa <source> atribūtiem:

Elementā <source> ir jāietver devsite-dark-theme klase, kas nodrošina DevSite priekšgalda āķi, lai atjauninātu multivides atribūtu un tā vērtību atkarībā no lietotāja atlasītās tumšās tēmas opcijas: light , dark vai device . Multivides atribūta vērtībā ir jāiekļauj multivides vaicājums (prefers-color-scheme: dark) . Ja multivides atribūtā jau ir elementi <source> ar media vaicājumiem, pievienojiet esošos multivides vaicājumus ar un (prefers-color-scheme: dark) vai pievienojiet jaunu elementu <source> , kura multivides atribūta vērtība ir (prefers-color-scheme: dark) . media vaicājums un tā vērtība tiks noņemta vai aizstāta atkarībā no lietotāja atlasītās tumšā motīva opcijas. Lai gan tumšā motīva varianta attēla faila nosaukums atribūtā srcset tehniski var būt jebkas, esošā attēla faila nosaukumam ieteicams pievienot -dark-theme .