Image

Image draws a loaded picture inside its box, scaled to fit, fill or cover it.

Light

Dark

ImageLive preview soon

Showing an image

View render(Assets& assets) const {
    const auto sunset = assets.load<Pixmap>("assets/sunset.png");

    return Image {
        sunset,
        width = 240_px,
        height = 160_px,
        corner_radius = CornerRadius::all(12.f),
    };
}

The picture loads in the background. Until it's ready, the image draws nothing, so a fixed size keeps the layout steady. See Assets.

Fit

When the picture and its box have different shapes, fit decides how it's scaled:

Fit	Result
ImageFit::Contain	The whole picture is visible, with empty space on two sides. The default.
ImageFit::Cover	The box is filled completely, and the picture is cropped.
ImageFit::Fill	The picture is stretched to the box, ignoring its proportions.
ImageFit::None	The picture keeps its original size.

Image { sunset, fit = ImageFit::Cover, width = 120_px, height = 120_px }

Pixel art

Scaled pictures are smoothed by default. For pixel art, ImageFilter::Nearest keeps edges sharp:

Image { sprite, filter = ImageFilter::Nearest, width = 128_px, height = 128_px }