What Is the Difference Between SMIL Meet, Slice, and Fill?

In Synchronized Multimedia Integration Language (SMIL), the fit attribute determines how visual media objects scale and position themselves inside a defined layout region. When the intrinsic dimensions and aspect ratio of an image or video do not match the assigned region, SMIL uses scaling values like meet, slice, and fill to resolve the layout discrepancy. This guide breaks down how each of these three scaling modes handles aspect ratios, visual cropping, and spatial distortion.

The Role of the SMIL fit Attribute

SMIL layouts rely on predetermined display regions defined in the document head. Because external assets often arrive in varying resolutions and aspect ratios, the fit attribute dictates whether the renderer should prioritize preserving the original proportions, filling the entire boundary, or clipping surplus visual data.

fit="meet" (Uniform Scaling with Letterboxing)

The meet value scales the visual media object proportionally so that its entire content fits within the target region while maintaining its original aspect ratio.

• Aspect Ratio: Strictly preserved.
• Cropping: None; all visual content remains fully visible.
• Visual Result: The renderer enlarges or shrinks the media until either its width or height touches the region's boundary. If the aspect ratios differ, empty space remains on the sides (pillarboxing) or top and bottom (letterboxing).
• Equivalent Behavior: Behaves identically to contain in CSS object-fit or SVG meet.

fit="slice" (Uniform Scaling with Cropping)

The slice value scales the media object proportionally until it completely covers the target region, maintaining the original aspect ratio by slicing away any overflowing dimensions.

• Aspect Ratio: Strictly preserved.
• Cropping: Content that extends beyond the region's boundaries is cropped.
• Visual Result: The media scales until both its width and height completely cover the region. The dimension that exceeds the boundary is clipped equally or according to alignment rules, eliminating blank borders at the cost of losing peripheral detail.
• Equivalent Behavior: Behaves identically to cover in CSS object-fit or SVG slice.

fit="fill" (Non-Uniform Distortion)

The fill value scales the media object non-uniformly so that its width and height match the region dimensions exactly, disregarding the original aspect ratio.

• Aspect Ratio: Ignored and distorted.
• Cropping: None; all content remains inside the region.
• Visual Result: The media stretches or squashes horizontally and vertically to occupy every pixel of the region. This ensures full coverage without letterboxing or cropping, but it often leads to visible unnatural stretching.
• Equivalent Behavior: Behaves identically to fill in CSS object-fit or none in SVG preserveAspectRatio.

Comparison Overview