Nëse një imazh është më i gjerë se kolona e përmbajtjes kryesore - siç ndodh shpesh në ekranet më të vogla - DevSite e kufizon automatikisht atë në gjerësinë e kolonës. Megjithatë, nëse imazhi ka të vendosur atributet width dhe height , vetëm gjerësia ndryshohet, duke bërë që imazhi të shtrembërohet. Rrjedhimisht, mos e vendosni height e imazhit . Kjo do të thotë që faqja mund të rivizatohet nëse imazhi është i ngadalshëm në ngarkim (duke shkaktuar një kërcim), por kjo është më mirë se një imazh që nuk përshtatet në ekran.
Ju mund të aplikoni class="screenshot" në një imazh për t'i dhënë asaj një kufi që e largon atë nga teksti aty pranë. Kjo zakonisht përdoret për pamjet e ekranit që kanë sfond të bardhë dhe përndryshe humbasin në faqe. Mos e përdorni për imazhe që nuk kanë nevojë për të.
Lundrues pranë tekstit
Imazhi në të djathtë ka gjithashtu class="attempt-right" , i cili e shpërndan imazhin drejt e në ekrane më të mëdha, por e detyron imazhin në paraqitjen vertikale në ekranet më të vegjël, tabletët dhe më të vegjël, ku lundrimi djathtas do të shkaktonte probleme. Gjithashtu disponohet class="attempt-left" . Për të përdorur së bashku attempt-left dhe attempt-right , sigurohuni që elementi attempt-left të jetë i pari.
Kur imazhet janë lundruese, ato nuk mund të kalojnë 50% të gjerësisë së kolonës. Nëse do, ato rishkallëzohen.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Ju mund të përdorni të njëjtat klasa për të lëvizur elementë të tjerë, të tillë si një <figure> që përmban një imazh dhe titull:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Pastrimi i tekstit të lëvizur
Për të parandaluar që teksti të mbështillet rreth një elementi të lundruar dhe të shfaqet në gjerësinë e tij origjinale, mund të shtoni një klasë clear për elementët e prekur që ndjekin elementin e lundruar.
<p class="clear">Hello world.</p>
Shembull me klasën e qartë
Në këtë shembull, paragrafi i dytë përfshin një klasë clear .
Ky paragraf përfundon rreth imazhit të lundruar . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ky paragraf ka një klasë të qartë dhe nuk mbështillet rreth imazhit të lundruar . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat jo proident, ndodh në culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud ushtrime 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.
Shembull pa klasën e qartë
Në këtë shembull, të dy paragrafët përfundojnë rreth imazhit të lundruar.
Ky paragraf përfundon rreth imazhit të lundruar . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ky paragraf përfundon rreth imazhit të lundruar . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat jo proident, ndodh në culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud ushtrime 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.
Imazhe me temë të errët
DevSite ofron një grup të vogël emrash klasash që mund të aplikohen në imazhe për të modifikuar pamjen e tyre kur aktivizohet tema e errët.
Errësimi i imazhit
Si parazgjedhje, të gjitha imazhet përveç skedarëve SVG janë paksa të errësuar në temën e errët.
Për të hequr errësimin e paracaktuar nga një imazh kur është aktivizuar tema e errët, shtoni një klasë pa filtër në imazh:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Përmbysja e një imazhi
Për imazhet me një gamë ngjyrash njëngjyrëshe të zezë ose të errët, shtoni një klasë invert në imazh për ta bërë atë të shfaqë të bardhë/dritë në temën e errët:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Për një faqe _index.yaml , shtoni invert në fushën e classname për një artikull rreshti:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Imazhi i veçantë i variantit të temës së errët
Nëse dëshironi të siguroni një imazh të veçantë që shfaqet vetëm kur aktivizohet tema e errët, mbështillni elementin ekzistues <img> në një element <picture> dhe shtoni një element <source> për variantin e temës së errët.
Në shembullin e mëposhtëm, ka dy skedarë SVG për shenjën e fjalëve të Google brenda një elementi <picture> . Kur tema e errët është e çaktivizuar, skedari i imazhit brenda elementit <img> shfaqet, duke treguar shenjën e fjalës me katër ngjyrat e markës Google. Kur aktivizohet tema e errët, shfaqet skedari i imazhit brenda elementit <source> , ku shenja e fjalës është tërësisht e bardhë dhe nuk ka ngjyra të markës.
Shembull
Kodi
<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>
Shënime
Për shkak se tema e errët është aktivizuar pas një flamuri veçorie, ju lutemi vini re sa vijon në lidhje me atributet e elementit <source> :
Elementi <source> duhet të përfshijë një klasë devsite-dark-theme , e cila siguron një goditje për frontin e DevSite për të përditësuar atributin e medias dhe vlerën e tij në varësi të opsionit të temës së errët të zgjedhur nga përdoruesi: light , dark ose device . Atributi media duhet të përfshijë në vlerën e tij një pyetje mediatike (prefers-color-scheme: dark) . Nëse tashmë keni elementë <source> me pyetje media në atributin media, ose shtoni pyetjet ekzistuese të medias me dhe (prefers-color-scheme: dark) ose shtoni një element të ri <source> vlera e atributit të medias së të cilit është (prefers-color-scheme: dark) . Kërkesa media dhe vlera e saj do të hiqen ose zëvendësohen në varësi të opsionit të temës së errët të zgjedhur nga përdoruesi. Ndërsa emri i skedarit të imazhit të variantit të temës së errët në atributin srcset teknikisht mund të jetë çdo gjë, rekomandohet shtimi i -dark-theme në emrin e skedarit ekzistues.