Skip to main content

BoxFit

How a box should be inscribed into another box.

Inherits: enum.Enum

Properties

  • CONTAIN - As large as possible while still containing the source entirely within the target box.
  • 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 whether this means the source overflows the target box horizontally.
  • FIT_WIDTH - Make sure the full width of the source is shown, regardless of whether this means the source overflows the target box vertically.
  • NONE - Align the source within the target box (by default, centering) and discard any portions of the source that lie outside the box.
  • SCALE_DOWN - 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.

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.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="BoxFit Showcase")
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    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],
                    ),
                ]
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)

Properties​

CONTAINclass-attributeinstance-attribute​

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

COVERclass-attributeinstance-attribute​

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

FILLclass-attributeinstance-attribute​

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

FIT_HEIGHTclass-attributeinstance-attribute​

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

FIT_WIDTHclass-attributeinstance-attribute​

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

NONEclass-attributeinstance-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_DOWNclass-attributeinstance-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.