Keep Ratio Keyword

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. This feature is available since version 0.1.150. Please see following URL examples.

• 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
• http://example.com/img/background.jpg?w=1920&h=1080#msx-keep-ratio

Please see following code example.

Example

Screenshot

Example Screenshot (Keep Ratio Keyword)

Code

{
    "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"
        }]
}

Demo

• Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/hidden_feature_18.json
• Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/hidden_feature_18.json