Si una imagen es más ancha que la columna de contenido principal (como suele ocurrir en pantallas más pequeñas), DevSite la limita automáticamente al ancho de la columna. Sin embargo, si la imagen tiene configurados los atributos width y height, solo se cambia el tamaño del ancho, lo que provoca que la imagen se distorsione. Por lo tanto, no configures el height de la imagen. Esto significa que la página puede volver a dibujarse si la imagen tarda en cargarse (lo que causa un salto), pero eso es mejor que una imagen que no cabe en la pantalla.
Puedes aplicar class="screenshot" a una imagen para darle un borde que la separe del texto cercano. Por lo general, se usa para capturas de pantalla que tienen fondos blancos y, de otro modo, se pierden en la página. No la uses para imágenes que no la necesiten.
Flotante junto al texto
La imagen de la derecha también tiene class="attempt-right", que coloca la imagen a la derecha en pantallas más grandes, pero la fuerza a un diseño vertical en pantallas más pequeñas, tablets y dispositivos más pequeños, donde la posición flotante a la derecha causaría problemas. También está disponible class="attempt-left". Para usar attempt-left y attempt-right juntos, asegúrate de que el elemento attempt-left sea el primero.
Cuando las imágenes están flotantes, no pueden superar el 50% del ancho de la columna. Si es así, se vuelven a escalar.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Puedes usar las mismas clases para hacer flotar otros elementos, como un <figure> que contenga una imagen y un título:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Cómo borrar el texto flotante
Para evitar que el texto se ajuste a un elemento flotante y se muestre en su ancho nativo, puedes agregar una clase clear a los elementos afectados que siguen al elemento flotante.
<p class="clear">Hello world.</p>
Ejemplo con la clase clear
En este ejemplo, el segundo párrafo incluye una clase clear.
Este párrafo se une a la imagen flotante . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Este párrafo tiene una clase clara y no se une a la imagen flotante. 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.
Ejemplo sin la clase clara
En este ejemplo, ambos párrafos se unen alrededor de la imagen flotante.
Este párrafo se une a la imagen flotante. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Este párrafo se une a la imagen flotante. 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.
Imágenes del tema oscuro
DevSite proporciona un pequeño conjunto de nombres de clase que se pueden aplicar a las imágenes para modificar su apariencia cuando se habilita el tema oscuro.
Oscurecimiento de imágenes
De forma predeterminada, todas las imágenes, excepto los archivos SVG, se oscurecen ligeramente en el tema oscuro.
Para quitar el oscurecimiento predeterminado de una imagen cuando el tema oscuro está habilitado, agrega una clase sin filtro a la imagen:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Cómo invertir una imagen
En el caso de las imágenes con una paleta de colores monocromática negra o oscura, agrega una clase invert a la imagen para que se muestre en blanco o claro en el tema oscuro:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Para una página _index.yaml, agrega invert al campo classname de un elemento de fila:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Imagen de variante del tema oscuro independiente
Si deseas proporcionar una imagen independiente que solo se muestre cuando el tema oscuro esté habilitado, une el elemento <img> existente en un elemento <picture> y agrega un elemento <source> para la variante del tema oscuro.
En el siguiente ejemplo, hay dos archivos SVG para el logotipo de Google dentro de un elemento <picture>. Cuando se inhabilita el tema oscuro, se muestra el archivo de imagen dentro del elemento <img>, que muestra el logotipo con los cuatro colores de la marca de Google. Cuando se habilita el tema oscuro, se muestra el archivo de imagen dentro del elemento <source>, en el que el logotipo es completamente blanco y no tiene colores de marca.
Ejemplo
Código
<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>
Notas
Debido a que el tema oscuro está habilitado detrás de una marca de función, ten en cuenta lo siguiente sobre los atributos del elemento <source>:
El elemento <source> debe incluir una clase devsite-dark-theme, que proporciona un hook para que el frontend de DevSite actualice el atributo de contenido multimedia y su valor según la opción de tema oscuro que seleccione el usuario: light, dark o device.
El atributo de medios debe incluir una consulta de medios (prefers-color-scheme: dark) en su valor.
Si ya tienes elementos <source> con consultas media en el atributo de contenido multimedia, agrega las consultas de contenido multimedia existentes con and (prefers-color-scheme: dark) o agrega un nuevo elemento <source> cuyo valor del atributo de contenido multimedia sea (prefers-color-scheme: dark). La búsqueda media y su valor se quitarán o reemplazarán según la opción de tema oscuro que seleccione el usuario.
Si bien, técnicamente, el nombre del archivo de la imagen de la variante del tema oscuro en el atributo srcset puede ser cualquier cosa, se recomienda agregar -dark-theme al nombre del archivo de la imagen existente.