During the screen capture process, the editor attempts to replicate the image's appearance and styling. However, complex CSS rules, dynamic scaling, or specific container properties may cause the image's inherent display dimensions (height and width) to be captured incorrectly. Fortunately, this can be quickly fixed using the editor's built-in tools.
To restore the correct dimensions of the image, follow these steps:
- Inspect the Incorrect Image in the Editor
Click directly on the image that is displaying with the wrong size in your demo screen. This action should bring up the element's properties and options, typically including the Styles Panel.
- Locate the Size Properties
In the Styles Panel, look for the input fields corresponding to the element's Width and Height properties.
- Adjust the Dimensions
If you know the correct dimensions (e.g., 600px by 400px), simply enter those values.
If you don't know the exact dimensions, you can try one of the following common fixes:
- Set Width to 100% and Height to auto. This often forces the image to fill its parent container correctly while maintaining its original aspect ratio.
- Delete existing, incorrect values for width and height to allow the image to render at its native size.
- Save the Screen
Once the image appears with the correct size and aspect ratio on your canvas, Save the screen to apply and finalize your styling changes.