Object Fit
Use object fit utilities to control how an image or media element is resized to fit its container. These map directly to Flutter’s BoxFit values.
Style('h-48 w-96 object-cover ...', child: Image.network('/img/mountains.jpg'))Style('h-48 w-96 object-contain ...', child: Image.network('/img/mountains.jpg'))Style('h-48 w-96 object-fill ...', child: Image.network('/img/mountains.jpg'))Style('h-48 w-96 object-scale-down ...', child: Image.network('/img/mountains.jpg'))Style('h-48 w-96 object-none ...', child: Image.network('/img/mountains.jpg'))Class reference
Section titled “Class reference”| Class | Flutter equivalent | Description |
|---|---|---|
object-cover | BoxFit.cover | Resize to cover the container, cropping if needed |
object-contain | BoxFit.contain | Resize to fit within the container |
object-fill | BoxFit.fill | Stretch to fill the container |
object-none | BoxFit.none | Display at natural size |
object-scale-down | BoxFit.scaleDown | Scale down to fit, but never scale up |