data-breakpoints
Lista de puntos de interrupción separados por comas y, opcionalmente, seguidos de dos puntos (:
) y comandos del servicio de imágenes o ajustes preestablecidos de imagen. Cada punto de interrupción es un valor de anchura de imagen definido en píxeles CSS lógicos. La biblioteca carga la imagen con el valor más grande más cercano de la lista y la reduce en el cliente para que coincida con el ancho de la imagen CSS en tiempo de ejecución. (Si trabaja en una pantalla de alta densidad, las representaciones de imágenes cargadas desde el servidor representan valores de punto de interrupción multiplicados por la proporción de píxeles del dispositivo).
Para cualquier punto de interrupción de la lista, es posible definir uno o más comandos del servicio de imágenes o nombres de ajustes preestablecidos de imagen. Estos parámetros adicionales solo se aplican a la imagen en caso de que este punto de interrupción en particular esté activo actualmente.
Puede utilizar cualquier comando de servicio de imágenes admitido, excepto los comandos de vista que afectan al tamaño de la imagen de respuesta, como wid=
, hei=
o scl=
. La misma restricción se aplica a los ajustes preestablecidos de imagen: un ajuste preestablecido de imagen utilizado con la biblioteca de imágenes adaptables no debe contener estos comandos.
Los nombres de varios comandos del servicio de imágenes o ajustes preestablecidos de imagen se separan con el carácter " &
". Si un comando del servicio de imágenes tiene una coma en su valor, dicha coma se reemplaza por %2C
. Los nombres de ajustes preestablecidos de imagen están envueltos en símbolos de dólar ( $
).
Ejemplos
Solo se usan puntos de interrupción
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720">
Usando comandos para servicio de imágenes
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:op_sharpen=1,720:resMode=sharp2&op_usm=0.9%2C1.0%2C8%2C0">
Utilizando ajustes preestablecidos de imagen
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:$ResponsiveImage_Low$,940:$ResponsiveImage_High$">
Usar ajustes preestablecidos de imagen y comandos de servicio de imágenes
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:qlt=50,940:$ResponsiveImage_High$">