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.
Šī 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.
Šī 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
.