Difference between revisions of "Keep Ratio Keyword"

From MSX - Wiki
Jump to navigation Jump to search
Line 1: Line 1:
 
It is possible to add the keyword <code>msx-keep-ratio</code> 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. Adding the keyword will scale up/down the image to fill the entire screen. This feature is available since version '''0.1.150'''.  
 
It is possible to add the keyword <code>msx-keep-ratio</code> 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. Adding the keyword will scale up/down the image 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. If your background image contains text or natural objects (like people, animals, landscapes, etc.), it is recommended to use this keyword because this kind of images will often look strange when stretched too much.'''
+
'''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. If your background image contains texts or natural objects (like people, animals, landscapes, etc.), it is recommended to use this keyword because this kind of images will often look strange when stretched too much.'''
  
 
Please see following URL examples.
 
Please see following URL examples.

Revision as of 13:45, 22 November 2022

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. Adding the keyword will scale up/down the image 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. If your background image contains texts or natural objects (like people, animals, landscapes, etc.), it is recommended to use this keyword because this kind of images will often look strange when stretched too much.

Please see following URL examples.

Please see following code example.

Example[edit]

Screenshot[edit]

Example Screenshot (Keep Ratio Keyword)

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

Demo[edit]

Retrieved from "https://msx.benzac.de/wiki/index.php?title=Keep_Ratio_Keyword&oldid=2810"