TIP
Each example has a "Source Code" link to the full implementation. You can also open the sandbox in a new tab for a better editing experience.
Fit Modes
This example creates five canvases, one for each fit mode (cover, contain, fill, none, scale-down). A 640×160 placeholder image is placed inside a container smaller than the image. The red border shows the container boundary. Notice how each mode handles the mismatch between the image's aspect ratio and the container's differently.
Positions
This example demonstrates object-position behavior. The same image is placed inside containers using different position values: pixel offsets, percentages, and named anchors like left, center, right. Watch how the image shifts within the container boundary as the position type changes.
Fuzzer
The fuzzer randomly generates combinations of fit modes, container sizes, image sizes, and position values. It is useful for visually verifying that the library handles edge cases correctly. Each refresh produces a new random configuration.