data-breakpoints
En kommaavgränsad lista med brytpunkter och eventuellt följt av ett kolon ( :), kommandona Bildvisning eller Bildförinställningar. Varje brytpunkt är ett bildbreddsvärde som definieras i logiska CSS-pixlar. Biblioteket läser in bilden med det närmaste större värdet från listan och nedskalar den på klienten för att matcha CSS-bildbredden vid körning. (Om du arbetar på en skärm med hög densitet representerar bildåtergivningar som läses in från servern brytpunktsvärden som multipliceras med enhetens pixelförhållande.)
För varje brytpunkt i listan är det möjligt att definiera ett eller flera bildserverskommandon eller bildförinställningsnamn. Sådana extra parametrar tillämpas bara på bilden om den här brytpunkten är aktiv.
Du kan använda vilket bildserverkommando som helst, förutom de kommandon som påverkar svarsbildens storlek, som wid=, hei= eller scl=. Samma begränsning gäller för bildförinställningar: en bildförinställning som används med ett responsivt bildbibliotek får inte innehålla sådana kommandon.
Kommandon för flera bildservrar eller namn på bildförinställningar avgränsas med tecknet &. Om ett bildserverkommando har ett kommatecken i värdet ersätts det med %2C. Namn på bildförinställningar omsluts av dollartecken ( $).
Exempel
Använder bara brytpunkter
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720">
Använda bildserverkommandon
<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">
Använda bildförinställningar
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:$ResponsiveImage_Low$,940:$ResponsiveImage_High$">
Använda kommandona Bildförinställningar och Bildvisning
<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:qlt=50,940:$ResponsiveImage_High$">