These two design items apply to images in event details (accordion and pop-up). They allow you to choose the size of your image and how it occupies the image space, i.e., the space available for the image.
To find these design items...
Step 1: After you log in, click on Calendars (brown box below).
The Your Calendars page will open.
Step 2: Choose the calendar you wish to modify (brown box below).
Step 3: Click on Design (brown box below).
Step 4: Click on Events (brown box below).
Step 5: Scroll down until you find Image aspect ratio and Image object fit.
To modify these design items...
IMAGE ASPECT RATIO
Click on the arrow to open the dropdown menu. Click on the option you prefer.
About the options...
EventOn Original
This is the most optimized choice for EventOn but not for CCB images which are 16:9. EventOn Original uses 40% of the viewport height, so this will determine the image space.
If you choose this option, then Image object fit may not longer be relevant. It depends on the dimensions of the image. If the image is square, you would see differences between object fit, cover and fill options. Here is an example that explains all the options and includes a demo, so you can select different options to see what happens: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit.
All other options
These are sizing options. The first number is the length and the second number is the height. So, 3:2 means, for example, that the length will be 1/3 longer than the relative height.
IMAGE OBJECT FIT
Click on the arrow to open the dropdown menu. Click on the option you prefer.
About the options...
All these options work with a larger image space than the EventOn option.
Here is how each interacts with the image space:
Option | Aspect ratio | If aspect ratio does not match aspect ratio of the image space |
Cover | Sized to maintain aspect ratio | Image will be clipped to fit |
Contain | Scaled to maintain aspect ratio | Image will be "letterboxed" (top/bottom borders) |
Fill | Sized to fill image space | Image will be stretched to fit |
Again, in case you missed it above, here is an example that explains all the options and includes a demo, so you can select different options to see what happens: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit.
Click Save at the bottom to save your changes.
