Resizing

List of parameters

💡

Different combinations of parameters can yield different results.

Width (w)

You can specify the width using the w parameter.

Integer Optional

Height (h)

You can specify the height using the h parameter.

Integer Optional

BoxFit (bf)

You can determine how Mighty Image should fit the width and height by providing a boxfit (bf)

Options: cover, contain, fill, inside, outsideDefault: coverOptional

Gravity (g)

You can change how BoxFit behaves by adding a gravity parameter g

Options: top, right top, right, right bottom, bottom, left bottom, left, left top Optional

Cover (default)

By default, Mighty Image will fit to cover, meaning rescale the image to adhere to the provided dimensions, while preserving the original aspect ratio. As a result, this can lead to cropping/clipping some of the content.

In this example, when the image is in landscape, height will be rescaled to fit the requested dimension while clipping the width to preserve the original aspect ratio and prevent distortion

The landscape image will resize to 500x500 while keeping aspect ratio and clipping to the center

❓

w=500 h=500 bf=cover (default) g=east

Try it

By default, it wil cover the image on the center. By changing the gravity g, parameter you can change how you want Mighty Image to cover the image.

❓

w=500 h=500 bf=cover (default) g=east

Try it

❓

w=500 h=500 bf=cover (default) g=west

Try it

Contain

To resize an image without cropping or clipping the contain, you should set boxfit explicitly to contain When using contain , the resulting image wil strictly adhere to the provided dimension while adding padding (letterboxing) where needed to preserve the aspect ratio of the original image.

❓

w=500 h=500 bf=contain g=center(default)

Try it

By default, it wil cover the image on the center. By changing the gravity g, parameter you can change how you want Mighty Image to contain the image.

❓

w=500 h=500 bf=contain g=north

Try it

❓

w=500 h=500 bf=contain g=south

Try it

Inside or Outside

If you want to preserve aspect ratio and enforce at last one size constraint without clipping the image you can fit inside or outside

When fitting inside, the resulting image will resize to the smallest possible size, while ensuring that the provided dimensions are not exceeded

Keep as small as possible, within the contraints

❓

w=500 h=500 bf=inside

Try it

When fitting outside, the resulting image will resize to the smallest possible size, while allowing it to exceed to provided dimensions.

Allow image to exceed dimension to preserve aspect ration

❓

w=500 h=500 bf=outside

Try it

When either inside or outside boxfit is used, the gravity paramater doesn’t have any affect.

Fill

If you want to guarantee that the resulting image adhere to exactly the provided dimension without preserving the aspect ratio, you can use fill. This will stretch the original image to fit both height and weight dimensions.

❓

w=500 h=500 bf=fill

Try it

When fill boxfit is used, the gravity paramater doesn’t have any affect.