Height

      Last updated May 18, 2020

    The height parameter enables dynamic height resizing based on pixels and percent values. The {value} can be either a positive integer or a float between 0.0 and 0.99. If the height parameter is an integer greater than or equal to 1, the value is interpreted as a pixel height. If the height parameter is a float between 0.0 and 0.99, the value is interpreted as a percentage height. The height parameter will automatically calculate the width of the image according to the aspect ratio of the input image. If a width parameter is present this value will be used instead. If both height and width are omitted, the input image dimensions are used.

    API Pattern

    height={value}

    Parameter

    Parameter Description
    height Height of the output image.

    Parameter Values

    Value Units Description
    Integer Pixels A whole number between 1 and 8192.
    Float Percentage Decimal number between 0.0 and 0.99.

    Notes

    1. The maximum output dimensions are 8,192x8,192 pixels.
    2. As we use a positive float between 0.0 and 0.99 to return a percentage based scaled image, in order to return an image that is 100% or more, a p parameter can be appended to the value. For example: height=250p would return an image that is 250% the height of the original. We use p as a simple way to represent percent.
    3. Pixel rounding is performed on all calculations in a decimal format (with as much accuracy as possible). The final value is then rounded down.

    Examples

    Description HTML Demo
    Pixel Resize - Resize the height to 200px. <img src="image.jpg?height=200"/> Example
    Percentage Resize - Resize the height to 10% of the input image. <img src="image.jpg?height=0.10"/> Example
    Percentage Resize - Resize the height to 150% of the input image. <img src="image.jpg?height=150p"/> Example
    Advanced Examples (Combining Additional Parameters)
    Description HTML Additional Param Demo
    Disproportionate Resize - Disproportionally resize to a height of 200px and a width that is 50% of the original. <img src="image.jpg?height=200&width=0.50"/> width Example
    Resize to Bounds - Resize the image to fit within the bounds of 150px in height by 150px in width. <img src="image.jpg?height=150&width=150&fit=bounds"/> fit Example
    Resize & Device Pixel Ratio - Resize the height to 200px for screens with a device pixel ratio of 2. <img src="image.jpg?height=200&dpr=2"/> dpr Example
    Back to Top