For any image on the canvas, you can specify the Cropping Style:
There are four options:
None (default)
- The image maintains aspect ratio, i.e. it is not stretched.
- There can be "empty" space if the aspect ratio of the image does not match the aspect ratio of the element area.
- The entire image is displayed in the element area - no part of the image is cropped.
Position Center
- The image maintains aspect ratio, i.e. it is not stretched.
- There is no "empty" space (aside from transparency in the image) - the entire element area is covered by the image.
- The image is anchored at the center of the element area.
- If the image is too tall, the top and bottom of the image are cropped equally until the image fits in the element area.
- OR
- If the image is too wide, the left and right sides of the image are cropped equally until the image fits in the element area.
Position Top or Left
- The image maintains aspect ratio, i.e. it is not stretched.
- There is no "empty" space (aside from transparency in the image) - the entire element area is covered by the image.
- The image is anchored at the upper left corner of the element area.
- If the image is too tall, the bottom of the image is cropped until the image fits in the element area.
- OR
- If the image is too wide, the right side of the image is cropped until the image fits in the element area.
Position Bottom or Right
- The image maintains aspect ratio, i.e. it is not stretched.
- There is no "empty" space (aside from transparency in the image) - the entire element area is covered by the image.
- The image is anchored at the lower right corner of the element area.
- If the image is too tall, the top of the image is cropped until the image fits in the element area.
- OR
- If the image is too wide, the left side of the image is cropped until the image fits in the element area.
For Image Buttons, the options are None (default) and Position Center.
What is cropping?
Cropping is the removal of the outer parts of an image. For app makers, this can be useful when you want an image to fit perfectly within a specific space.
Why do I need cropping?
One of the main benefits of using the MobileSmith platform is that you do not have to create separate pages for iPhone and Android. The same page in the platform is used for each device type. One reason this is not more common is that iPhones and Androids come in different shapes, sizes, and, most importantly, aspect ratios. The aspect ratio is the proportional size of the height compared to the width. For example, iPhone screens (starting with iPhone 5) have an aspect ratio of 16:9.
Since all iPhones are made by the same manufacturer (Apple), you can be sure that they will all have the same aspect ratio. Androids, on the other hand, come from a number of different manufacturers and are thus not uniform in screen size. The MobileSmith platform uses canvases with the same aspect ratio as iPhone.
When translating a canvas to a page in an app, we use percentages. For example, maybe an image takes up 27% of the page's vertical space and 100% of the horizontal space. These percentages can then be used to draw the same layout on any device.
For devices with the same aspect ratio as the platform, the image will display exactly as expected. But for a device with a different aspect ratio, we need to tell the device how to display the image, or else the image could end up looking "stretched" or "squished" on some devices.
Here is an example of how Cropping Style can be useful.
| Drawio | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Related articles
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| Page Properties | ||
|---|---|---|
| ||
|