�PNG
IHDR � � ;�� �IDATx��ܻn�0���K��
�)(�pA��� ���7�LeG{�� �§㻢|�� ذaÆ
6lذaÆ
6lذaÆ
6lom��$^�y���ذag�5 bÆ
6lذaÆ
6lذa{����
6lذaÆ
�`� � ��}H�Fkm�,�m����Ӫ���ô�ô!� �x�|'ܢ˟;�E:���9�&ᶒ�}�{�v]�n&�6�
�h��_��t�ڠ͵-ҫ���Z;��Z$�.�P���k�ž)�!��o���>}l�eQfJ�T��u і���چ��\��X=8��Rن4`Vw�l�>����n�G�^��i�s��"ms�$�u��i��?w�bs[m�6�K4���O�� �.�4��%����/��� �b�C%��t ��M�ז� �-l�G6�mrz2���s�%�9��s@���-�k�9�=���)������k�B5����\��+͂�Zsٲ ��Rn��~G���R���C����� �wIcI��n7jJ���hۛNCS|���j0��8y�iHKֶۛ�k�Ɉ+;Sz������ L /��F �*\��Ԕ�#"5��m�2��[S ��������=�g��n�a�P�e�ғ�L��
lذaÆ
6l�^k��̱aÆ
6lذaÆ
6lذa;����
�_��ذaÆ
6lذaÆ
6lذaÆ
���R��� IEND�B`
---
layout: default
title: Crop
---
# Crop
## Fit `fit=crop`
Resizes the image to fill the width and height boundaries and crops any excess image data. The resulting image will match the width and height constraints without distorting the image.
~~~ html
~~~
[](https://glide.herokuapp.com/1.0/kayaks.jpg?w=300&h=300&fit=crop)
### Crop Position
You can also set where the image is cropped by adding a crop position. Accepts `crop-top-left`, `crop-top`, `crop-top-right`, `crop-left`, `crop-center`, `crop-right`, `crop-bottom-left`, `crop-bottom` or `crop-bottom-right`. Default is `crop-center`, and is the same as `crop`.
~~~ html
~~~
### Crop Focal Point
In addition to the crop position, you can be more specific about the exact crop position using a focal point. This is defined using two offset percentages: `crop-x%-y%`.
~~~ html
~~~
You may also choose to zoom into your focal point by providing a third value: a float between 1 and 100. Each full step is the equivalent of a 100% zoom. (eg. `x%-y%-2` is the equivalent of viewing the image at 200%). The suggested range is 1-10.
~~~ html
~~~
## Crop `crop`
Crops the image to specific dimensions prior to any other resize operations. Required format: `width,height,x,y`.
~~~ html
~~~
[](https://glide.herokuapp.com/1.0/kayaks.jpg?crop=100,100,915,155)