Ha egy kép szélesebb, mint a fő tartalomoszlop – mint ez gyakran előfordul a kisebb képernyőkön –, a DevSite automatikusan az oszlop szélességére korlátozza. Ha azonban a képen width és height attribútumok is be vannak állítva, akkor csak a szélesség méreteződik át, ami a kép torzulását okozza. Ezért ne állítsa be a kép height . Ez azt jelenti, hogy az oldal újrarajzolhat, ha a kép lassan töltődik be (ez ugrást okoz), de ez jobb, mint egy kép, amely nem fér el a képernyőn.
class="screenshot" alkalmazhatja egy képre, hogy szegélyt adjon neki, amely eltolja a közeli szövegtől. Ezt általában olyan képernyőképekhez használják, amelyek fehér hátterűek, és egyébként elvesznek az oldalon. Ne használja olyan képekhez, amelyekhez nincs szükség rá.
Lebegő szöveg mellett
A jobb oldali képen is szerepel class="attempt-right" , amely a képet közvetlenül lebegteti nagyobb képernyőkön, de kisebb képernyőkön, táblagépeken és kisebb képernyőkön függőleges elrendezésbe kényszeríti a képet, ahol a jobbra lebegés problémákat okozna. class="attempt-left" is elérhető. attempt-left és attempt-right együtt használatához győződjön meg arról, hogy a attempt-left elem legyen az első.
Lebegő képek esetén nem haladhatják meg az oszlopszélesség 50%-át. Ha igen, akkor átméretezik őket.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Ugyanazokat az osztályokat használhatja más elemek lebegtetésére is, például egy képet és feliratot is tartalmazó <figure> -ra:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Lebegő szöveg törlése
Ha meg szeretné akadályozni, hogy a szöveg egy lebegő elem köré kerüljön, és a natív szélességében jelenjen meg, felvehet egy clear osztályt a lebegtetett elemet követő érintett elemekhez.
<p class="clear">Hello world.</p>
Példa a tiszta osztállyal
Ebben a példában a második bekezdés clear osztályt tartalmaz.
Ez a bekezdés a lebegtetett képet veszi körül . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ennek a bekezdésnek egyértelmű osztálya van, és nem veszi körül a lebegtetett képet . 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.
Példa egyértelmű osztály nélkül
Ebben a példában mindkét bekezdés a lebegtetett kép köré fonódik.
Ez a bekezdés a lebegtetett képet veszi körül . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ez a bekezdés a lebegtetett képet veszi körül . 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.
Sötét témájú képek
A DevSite egy kis osztályneveket kínál, amelyeket a képekre lehet alkalmazni, hogy módosítsák azok megjelenését, ha a sötét téma engedélyezett.
Képsötétedés
Alapértelmezés szerint az SVG-fájlok kivételével az összes kép enyhén elsötétül a sötét témában.
Ha el szeretné távolítani az alapértelmezett sötétítést a képről, amikor a sötét téma engedélyezett, adjon hozzá egy szűrő nélküli osztályt a képhez:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Kép megfordítása
Fekete vagy sötét monokróm színpalettával rendelkező képek esetén adjon hozzá egy invert osztályt a képhez, hogy sötét témában fehér/világos legyen:
<img src="/site-assets/logo-github.png" class="invert" alt="">
_index.yaml oldal esetén adja hozzá invert egy sor classname mezőjéhez:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Különálló sötét témaváltozat kép
Ha külön képet szeretne biztosítani, amely csak akkor jelenik meg, ha a sötét téma engedélyezve van, csomagolja be a meglévő <img> elemet egy <picture> elembe, és adjon hozzá egy <source> elemet a sötét témaváltozathoz.
Az alábbi példában két SVG-fájl található a Google szójelzőhöz egy <picture> elemen belül. Ha a sötét téma le van tiltva, az <img> elemen belüli képfájl jelenik meg, amely a négy Google márkaszínnel együtt mutatja a szójelzést. Ha a sötét téma engedélyezve van, a <source> elemen belüli képfájl jelenik meg, ahol a szójel teljesen fehér, és nincsenek márkaszínei.
Példa
Kód
<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>
Megjegyzések
Mivel a sötét téma be van kapcsolva egy funkciójelző mögött, kérjük, vegye figyelembe a következőket a <source> elem attribútumaival kapcsolatban:
A <source> elemnek tartalmaznia kell egy devsite-dark-theme osztályt, amely kapcsot biztosít a DevSite felhasználói felületének a médiaattribútum és annak értékének frissítéséhez a felhasználó által kiválasztott sötét téma beállításától függően: light , dark , vagy device . A médiaattribútum értékében tartalmaznia kell egy (prefers-color-scheme: dark) médialekérdezést. Ha már vannak <source> elemei media a médiaattribútumban, vagy fűzze hozzá a meglévő médialekérdezéseket és jelekkel (prefers-color-scheme: dark), vagy adjon hozzá egy új <source> elemet, amelynek médiaattribútumának értéke (prefers-color-scheme: dark) . A media és annak értékét a rendszer eltávolítja vagy lecseréli a felhasználó által kiválasztott sötét téma beállításától függően. Míg a sötét témaváltozat képének neve az srcset attribútumban technikailag bármi lehet, -dark-theme hozzáfűzése javasolt a meglévő kép fájlnevéhez.