Zoom Image Guide

To ensure your zoom image displays beautifully, follow these steps:

1. Upload a High-Resolution Image:
Start by uploading a large, high-quality image. This is crucial for maintaining clarity when the image is scaled. Always upload the image as a file without making any alterations to it, ensuring you maintain its original quality.

2. Whitespace Around the Image:
Add a bit of whitespace around your image. This helps prevent any part of the image from being cut off during zoom interactions and enhances the visual appeal.

3. Image Ratio and Pinch Area:
The initial ratio of your image defines the area that can be zoomed in or pinched. Keep this in mind when selecting and formatting your image.

4. Add the Image to HTML Area:
Place your image within the designated HTML area of your project. Ensure that the image path is correctly linked in your source code.

5. Manage and Upload Image in Files:
- Go to "Files" and select "Manage."
- Create a catalogue for your project.
- Upload the image there.
- Once uploaded, open the image and copy its path.
- Return to your HTML source editor and paste the image path there.

6. Open Source Adjustments:
Make any necessary adjustments within the open-source files to ensure proper functionality.

7. Padding Adjustments:
- Square Box: If your image is square, apply padding to maintain the aspect ratio: `padding-bottom: 100%`.
- Super Wide Image: For wide images, adjust the padding to: `padding-bottom: 50%`.

8. Trial and Error: You may need to experiment with padding and scaling settings to achieve the desired look.

Here is an example of the code

"

By following these guidelines, you’ll ensure that your images display perfectly within the zoom feature, providing a seamless and visually appealing user experience.