Keep Ratio Keyword
Jump to navigation
Jump to search
It is possible to add the keyword msx-keep-ratio
to a background image URL (at any position) to keep the aspect ratio. By default, the background image is stretched to fill the entire screen. By adding the keyword, the image is scaled up/down to fill the entire screen. This feature is available since version 0.1.150.
Note: Because of the immersive mode (introduced in version 0.1.150), the aspect ratio of backgrounds is not always 16:9 (like in previous versions) but can have any aspect ratio.
Please see following URL examples.
- http://example.com/img/background_msx-keep-ratio.jpg
- http://example.com/img/msx-keep-ratio/background.jpg
- http://example.com/img/background.jpg?msx-keep-ratio
- http://example.com/img/background.jpg?w=1920&h=1080&msx-keep-ratio
- http://example.com/img/background.jpg#msx-keep-ratio
Please see following code example.
Example[edit]
Screenshot[edit]
Code[edit]
{
"type": "pages",
"headline": "Keep Ratio Keyword",
"options": {
"items": [{
"type": "control",
"layout": "0,0,8,1",
"label": "Enable Immersive Mode",
"action": "[cleanup|settings:immersive_mode:1]"
}, {
"type": "control",
"layout": "0,1,8,1",
"label": "Disable Immersive Mode",
"action": "[cleanup|settings:immersive_mode:0]"
}]
},
"template": {
"type": "default",
"titleFooter": "{col:msx-white}default",
"imageLabel": "default",
"area": "0,4,12,2",
"layout": "0,0,2,2",
"color": "msx-glass",
"imageFiller": "cover",
"alignment": "center",
"selection": {
"important": true,
"background": "{context:background}"
},
"properties": {
"image:action": "slider:stop",
"image:trigger": "slider:sync"
}
},
"items": [{
"image": "http://msx.benzac.de/media/thumbs/square1.jpg",
"background": "http://msx.benzac.de/media/square1.jpg",
"action": "image:http://msx.benzac.de/media/square1.jpg"
}, {
"titleFooter": "{col:msx-white}msx-keep-ratio",
"imageLabel": "msx-keep-ratio",
"image": "http://msx.benzac.de/media/thumbs/square1.jpg",
"background": "http://msx.benzac.de/media/square1.jpg#msx-keep-ratio",
"action": "image:http://msx.benzac.de/media/square1.jpg"
}, {
"image": "http://msx.benzac.de/media/thumbs/square2.jpg",
"background": "http://msx.benzac.de/media/square2.jpg",
"action": "image:http://msx.benzac.de/media/square2.jpg"
}, {
"titleFooter": "{col:msx-white}msx-keep-ratio",
"imageLabel": "msx-keep-ratio",
"image": "http://msx.benzac.de/media/thumbs/square2.jpg",
"background": "http://msx.benzac.de/media/square2.jpg#msx-keep-ratio",
"action": "image:http://msx.benzac.de/media/square2.jpg"
}, {
"image": "http://msx.benzac.de/media/thumbs/square3.jpg",
"background": "http://msx.benzac.de/media/square3.jpg",
"action": "image:http://msx.benzac.de/media/square3.jpg"
}, {
"titleFooter": "{col:msx-white}msx-keep-ratio",
"imageLabel": "msx-keep-ratio",
"image": "http://msx.benzac.de/media/thumbs/square3.jpg",
"background": "http://msx.benzac.de/media/square3.jpg#msx-keep-ratio",
"action": "image:http://msx.benzac.de/media/square3.jpg"
}]
}