Si una imatge és més ampla que la columna de contingut principal, com passa sovint en pantalles més petites, DevSite la limita automàticament a l'amplada de la columna. Tanmateix, si la imatge té els atributs width i height establerts, només es canvia la mida de l'amplada, la qual cosa fa que la imatge es distorsioni. En conseqüència, no configureu l' height de la imatge. Això vol dir que la pàgina pot tornar a dibuixar si la imatge tarda a carregar-se (provocant un salt), però això és millor que una imatge que no encaixa a la pantalla.
Podeu aplicar class="screenshot" a una imatge per donar-li una vora que la compensi del text proper. Normalment s'utilitza per a captures de pantalla que tenen fons blancs i que, en cas contrari, es perden a la pàgina. No l'utilitzeu per a imatges que no ho necessitin.
Flotant al costat del text
La imatge de la dreta també té class="attempt-right" , que fa flotar la imatge directament en pantalles més grans, però obliga la imatge a un disseny vertical en pantalles més petites, tauletes i més petites, on flotar a la dreta causaria problemes. També està disponible class="attempt-left" . Per utilitzar attempt-left i attempt-right junts, assegureu-vos que l'element attempt-left sigui primer.
Quan les imatges estan flotant, no poden superar el 50% de l'amplada de la columna. Si ho fessin, es reescalaran.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Podeu utilitzar les mateixes classes per fer flotar altres elements, com ara una <figure> que conté tant una imatge com un subtítol:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Esborrar el text flotant
Per evitar que el text s'ajusti al voltant d'un element flotant i es mostri a la seva amplada nativa, podeu afegir una classe clear als elements afectats que segueixen l'element flotant.
<p class="clear">Hello world.</p>
Exemple amb la classe clara
En aquest exemple, el segon paràgraf inclou una classe clear .
Aquest paràgraf envolta la imatge flotant . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Aquest paràgraf té una classe clara i no envolta la imatge flotant . 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 desert 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.
Exemple sense la classe clara
En aquest exemple, tots dos paràgrafs envolten la imatge flotant.
Aquest paràgraf envolta la imatge flotant . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Aquest paràgraf envolta la imatge flotant . 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 desert 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.
Imatges de tema fosc
DevSite proporciona un petit conjunt de noms de classe que es poden aplicar a les imatges per modificar-ne l'aparença quan el tema fosc està habilitat.
Enfosquiment de la imatge
De manera predeterminada, totes les imatges, excepte els fitxers SVG, estan lleugerament enfosquides en el tema fosc.
Per eliminar l'enfosquiment predeterminat d'una imatge quan el tema fosc està habilitat, afegiu una classe sense filtre a la imatge:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Invertir una imatge
Per a imatges amb una paleta de colors monocroms negres o foscos, afegiu una classe invert a la imatge perquè es mostri en blanc/clar en tema fosc:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Per a una pàgina _index.yaml , afegiu invert al camp classname per a un element de fila:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Separa la imatge de la variant del tema fosc
Si voleu proporcionar una imatge independent que només es mostri quan el tema fosc està habilitat, embolcalleu l'element <img> existent en un element <picture> i afegiu un element <source> per a la variant del tema fosc.
A l'exemple següent, hi ha dos fitxers SVG per a la marca de paraula de Google dins d'un element <picture> . Quan el tema fosc està desactivat, es mostra el fitxer d'imatge dins de l'element <img> , que mostra la paraula marca amb els quatre colors de la marca de Google. Quan el tema fosc està habilitat, es mostra el fitxer d'imatge dins de l'element <source> , on la paraula marca és completament blanca i no té colors de marca.
Exemple
Codi
<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>
Notes
Com que el tema fosc està habilitat darrere d'un indicador de funció, tingueu en compte el següent sobre els atributs de l'element <source> :
L'element <source> ha d'incloure una classe devsite-dark-theme , que proporciona un ganxo perquè la interfície de DevSite actualitzi l'atribut multimèdia i el seu valor en funció de l'opció de tema fosc seleccionada per l'usuari: light , dark o device . L'atribut de mitjans ha d'incloure una consulta de mitjans (prefers-color-scheme: dark) al seu valor. Si ja teniu elements <source> amb consultes media a l'atribut media, afegiu les consultes multimèdia existents amb i (prefers-color-scheme: dark) o afegiu un nou element <source> el valor de l'atribut multimèdia és (prefers-color-scheme: dark) . La consulta media i el seu valor s'eliminaran o se substituiran en funció de l'opció de tema fosc seleccionada per l'usuari. Tot i que el nom del fitxer de la imatge variant del tema fosc a l'atribut srcset tècnicament pot ser qualsevol cosa, es recomana afegir -dark-theme al nom del fitxer de la imatge existent.