BoxFit

How a box should be inscribed into another box.

Inherits: Enum

Properties

• CONTAIN –

  As large as possible while still containing the source entirely within the

• COVER –

  As small as possible while still covering the entire target box.

• FILL –

  Fill the target box by distorting the source's aspect ratio.

• FIT_HEIGHT –

  Make sure the full height of the source is shown, regardless of

• FIT_WIDTH –

  Make sure the full width of the source is shown, regardless of

• NONE –

  Align the source within the target box (by default, centering) and discard

• SCALE_DOWN –

  Align the source within the target box (by default, centering) and, if

Examples

Showcase

import flet as ft


def showcase_card(fit: ft.BoxFit) -> ft.Container:
    return ft.Container(
        width=300,
        padding=12,
        border=ft.Border.all(1, ft.Colors.RED),
        border_radius=10,
        bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
        content=ft.Column(
            spacing=8,
            controls=[
                ft.Text(fit.name, weight=ft.FontWeight.BOLD),
                ft.Container(
                    width=240,
                    height=120,
                    border=ft.Border.all(1, ft.Colors.OUTLINE),
                    border_radius=8,
                    clip_behavior=ft.ClipBehavior.HARD_EDGE,
                    bgcolor=ft.Colors.SURFACE,
                    content=ft.Image(
                        src="https://picsum.photos/id/1025/420/220",
                        width=240,
                        height=120,
                        fit=fit,
                    ),
                ),
            ],
        ),
    )


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="BoxFit Showcase")
    page.add(
        ft.Text("Compare how the same image is inscribed into a fixed frame."),
        ft.Row(
            wrap=True,
            spacing=12,
            expand=True,
            scroll=ft.ScrollMode.AUTO,
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[showcase_card(fit) for fit in ft.BoxFit],
        ),
    )


ft.run(main)

Properties

CONTAIN = 'contain' class-attribute instance-attribute

As large as possible while still containing the source entirely within the target box.

COVER = 'cover' class-attribute instance-attribute

As small as possible while still covering the entire target box.

FILL = 'fill' class-attribute instance-attribute

Fill the target box by distorting the source's aspect ratio.

FIT_HEIGHT = 'fitHeight' class-attribute instance-attribute

Make sure the full height of the source is shown, regardless of whether this means the source overflows the target box horizontally.

FIT_WIDTH = 'fitWidth' class-attribute instance-attribute

Make sure the full width of the source is shown, regardless of whether this means the source overflows the target box vertically.

NONE = 'none' class-attribute instance-attribute

Align the source within the target box (by default, centering) and discard any portions of the source that lie outside the box.

The source image is not resized.

SCALE_DOWN = 'scaleDown' class-attribute instance-attribute

Align the source within the target box (by default, centering) and, if necessary, scale the source down to ensure that the source fits within the box.

This is the same as CONTAIN if that would shrink the image, otherwise it is the same as NONE.