Skip to main content

ImageContentMode

Namespace: BlazorNative.Components

How an image's pixels are painted inside the box the layout gave it.

public enum ImageContentMode

Inheritance ObjectValueTypeEnumImageContentMode
Implements IComparable, ISpanFormattable, IFormattable, IConvertible

Remarks:

The mode is paint-only, and that is a guarantee rather than an implementation note. The layout box belongs to Yoga — it comes from the image's natural size and the flex parameters you set — and it is identical under all four modes. Changing the mode repaints; it never reflows, and it can never move anything else on the page. If you want the image to occupy a different amount of space, set BnImage.Width or BnImage.Height; the mode will not do it for you.

Fields

NameValueDescription
Contain0Aspect-fit: the whole image is visible, scaled down to fit the box with its aspect ratio kept. The default. The leftover bars show BnImage.BackgroundColor.
Cover1Aspect-fill: the image covers the whole box with its aspect ratio kept, and the overflow is cropped. The paint never escapes the box — both platforms clip it.
Stretch2Fill the box on both axes, ignoring the aspect ratio. The image is distorted unless the box happens to match it.
Center3Natural size, centered, never scaled — and cropped when the image is bigger than the box.