Table of contents



Official Content

Specifies how the image is shown, depending on the size of the image and the size of the control where the image is used. It helps to avoid the distortion of the image.

Values

This is the default value. Indicates that no specific value is assigned to the property.
No Scale Respects the original size of the image, independently of the control area size.
Responsive Sets a responsive behavior.
Fill Keeping Aspect Ratio The image makes bigger or smaller in width and heigh in order to fill the whole size of the control area, but keeping the aspect of the image. For example, if the image size is 100x200, and the control size is 50 x 50, then the image size is converted to 50 x 100.
Fill The image is scaled in width and heigh in order to fill the whole size of the control area.
Fit The image scales in width and heigh in order to see it at all, and keeping the aspect of the image. For example, if the image is 100x200, and the control is 50 x 50, then the image is converted to 25 x 50.
Tile The image is not scaled. It is repeated horizontally and vertically to fill the control size.

Scope

Generators: Android, Apple, Angular
Level: Design System Style Class

Description

Usually, you have to put an image in a specific area on the layout, and you want to see this image without distortion. The problem is when the image size and the area size are not the same (the most common scenario).

For example, if you have a photo with size 1000 x 800 and you have to use it in an area of 200x150; obviously, there is an aspect ratio difference.

What you want to do is resize the original image without distortion, which in this case would produce a 200 x 150, and keeping the aspect of the photo.  In this case, you should use the default Value: scaleToFitkeepingAspect.

Content modes are used to resize the contents (image in this case) of your area view.

Samples

Sample 1

Image bigger than the control

You have the following image, which size is 500 x 559:

Image500x559

And it is used within a table cell that is smaller than the image. See how it is shown using the different values of the Content Mode Property:

Android - Content Mode Sample 1

Sample 2

Image smaller than the control

Considering this image, which size is 50x50:

Image50x50

And it is used it within a table cell; that is bigger than the image. See how it is shown, using the different values of the Content Mode Property:

Android - Content Mode Sample 2

 

 

Availability

This property is available since GeneXus 17 Upgrade 6.

See Also

Design System Object

Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant