Fit Property in Template
Understanding the Fit Property for Images and Videos in Templates
Welcome to Fit Property Guide!
The fit property is a crucial attribute for images and videos within templates. It determines how content should be scaled to fit within a specified area. KonPro provides four distinct fit property options: cover, contain, crop, and none.
Fit Property Options
KonPro provides four distinct fit property options to control how images and videos are displayed within templates:
Cover
When the cover fit property is used, the image or video is scaled to cover the entire specified area. This type does not preserve the aspect ratio of the image and stretches the image to fill the space completely.
Use case: Ideal when you want to fill the entire area without any empty spaces, and stretching is acceptable.
Contain
With the contain fit property, the image or video is scaled to fit entirely within the specified area without exceeding the boundaries. It preserves the image's aspect ratio and ensures that no part of the image is cropped.
Use case: Contain is ideal when you want the complete image to fit within the specified area, making sure no content is lost. This is useful for ensuring that all details of an image are visible.
Crop
When you select the crop fit property, the image or video is rescaled to the long edge of the specified area while maintaining the aspect ratio. This may result in some parts of the content being cropped.
Use case: Best when you need to focus on a specific part of the content and cropping is acceptable to achieve the desired composition.
None
The none fit property doesn't apply any scaling to the image or video. It's used when you want to display the image at its original dimensions, regardless of the specified area. The image may not fully fit within the area, and it's not scaled.
Use case: None is appropriate when you want to display the image in its original size without any alteration. This is useful when the image size is essential, and you don't want any scaling or cropping.
Usage Examples
Here are practical examples of how to use different fit properties in your templates:
Image with Cover Fit
{
"name": "background_image",
"type": "image",
"properties": {
"url": "https://example.com/image.jpg",
"fit": "cover"
}
}Video with Contain Fit
{
"name": "product_video",
"type": "video",
"properties": {
"url": "https://example.com/video.mp4",
"fit": "contain",
"play_style": "loop"
}
}Best Practices
Follow these best practices to get the most out of the fit property in your templates:
Choose the Right Fit
- Use
coverfor background images or when you want to fill the entire area - Use
containfor logos, product images, or when showing complete content is important - Use
croponly when you need exact dimensions and can accept distortion - Use
nonefor pixel-perfect content or when you want to preserve original quality
Consider Content Type
- For photos:
coverorcontainwork best - For videos:
containis usually preferred to avoid cropping important content - For graphics/logos:
containornonemaintain clarity
Common Issues and Solutions
Here are some common issues you might encounter and their solutions:
Content appears stretched
This usually happens when using crop with content that has a very different aspect ratio.
Solution: Use cover or contain instead.
Content appears too small
This can occur when using contain with very small source content.
Solution: Use higher resolution source content or consider using cover if cropping is acceptable.