Fit

      Last updated May 18, 2020

    The fit parameter controls how the image will be constrained within the provided size (width | height) values.

    Features

    API Pattern

    fit={value}

    Parameter

    Parameter Description
    fit How the image will be constrained within the provided size values.

    Parameter Values

    Value Description
    bounds Resize the image to fit entirely within the specified region.
    cover Resize the image to entirely cover the specified region.
    crop Resize and crop the image centrally to exactly fit the specified region.

    Notes

    The fit parameter requires both the width and the height parameter to take effect.

    Examples

    Description HTML Demo
    Fit Bounds - Resize the image to fit within the bounds of 150px in width by 150px in height. <img src="image.jpg?width=150&height=150&fit=bounds"/> Example
    Fit Cover - Resize the image to entirely cover 150px in width by 150px in height. <img src="image.jpg?width=150&height=150&fit=cover"/> Example
    Fit Crop - Crop the image to 150px in width by 150px in height. <img src="image.jpg?width=150&height=150&fit=crop"/> Example
    Back to Top