Crop

Advanced configuration

Piio crop functionality allows you to crop your images individually and it is used by setting the data-piio-crop attribute.

The data-piio-crop attribute has two mandatory values: width and height of the crop.

In case you need to change the x-axis and y-axis from where crop the image, the attribute accepts two additional values. The first one represents x-axis and the second one represents y-axis.

Values: width, height, [x-axis,y-axis] By default is going to crop from the center of the original image.

If width, height, x or y are set to numbers between 0.1 and 1 they are going to be treated as percentages otherwise they are going to be treated as px units.

Example: Basic usage setting width and height

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

data-piio="[image-src]"

data-piio-crop="500,500"/>

Example: Setting x-axis and y-axis addiotionaly

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

data-piio="image-src"

data-piio-crop="500,500,150,150"/>