I’m working on a brand new project, very large, very complex, which must be responsive. I’m just starting to set up the file itself and the layout template exoskeleton. I have a few questions:
Concerning the horizontal bar at the bottom of the screen (where there is the fullscreen button and the sound level), how to give it a precise height in pixels? I would like to have a height much smaller than the default one.
Is it possible, when integrating an image in a flexbox, to make this image automatically occupy the whole internal surface of the flexbox without the image being anamorphosed?
either it would occupy 100% of the width of the flexbox and with a height greater than the height of the flexbox but what exceeds in height must be invisible.
or it would occupy 100% of the height of the flexbox and with a width greater than the width of the flexbox but what exceeds in width must be invisible.
The appearance of the player toolbar changes depending on the Skin you select in the Player Settings (Export tab > Player Settings). If you choose the Classic Skin, the toolbar will appear thinner. You can try using this skin to see if it suits you.
Yes, it is possible. To do so, you set Lock Aspect Ration to None and 100% for the flex child’s width and height. Then, add the following javascript code to the On Load event of the slide where the image is added:
Kindly note that MyImage is the image name in this example:
var img = prez.object("MyImage");
if (!img)
return;
var imgNode = img.imageNode;
if (!imgNode)
return;
imgNode.style.objectFit = "cover";
Please refer to this sample for more information: responsive.approj (684 KB)
Thank you for your answer to question 1.
Concerning the question 2, I have difficulty to be understood. I will try to be more explicit.
I want the image inserted in the flexbox not to be anamorphosed. In your example, it is anamorphosed.
So consider a vertical flexbox of 310 pixels wide with a height of 100%, with an image inside whose initial dimensions are 400 pixels wide and 1500 pixels high.
When the module is viewed on a 1920x1080 screen, the flexbox will have a height (still 100%) of 1080 pixels high and a fixed width of 310 pixels wide. I want the image to automatically adjust so that this image is centered in width and centered in height. So, the image would overhang the flexbox in width by 45 pixels on the right and 45 pixels on the left (but this overhang must be hidden) and this same image would overhang the flexbox in height by 210 pixels at the top and 210 pixels at the bottom.
When the module is viewed on a 1280x720 screen, the flexbox will have a height (still 100%) of 720 pixels high and a fixed width of 310 pixels wide. I want the image to automatically adjust so that this image is centered in width and centered in height. Thus, the image would protrude from the flexbox in width by 45 pixels on the right and 45 pixels on the left (but this protrusion must be hidden) and this same image would protrude from the flexbox in height by 380 pixels at the top and 380 pixels at the bottom.
Have I made myself clearer? Do you understand what I want?
