Gecko [ unitednationsplay.com ]

Name	Size	Permission	Date
adjustments.md	1.21 KB	-rw-r--r--	2020-11-05 09:00
background.md	388 B	-rw-r--r--	2020-11-05 09:00
border.md	1.05 KB	-rw-r--r--	2020-11-05 09:00
colors.md	2.01 KB	-rw-r--r--	2020-11-05 09:00
crop.md	1.71 KB	-rw-r--r--	2020-11-05 09:00
effects.md	1022 B	-rw-r--r--	2020-11-05 09:00
encode.md	729 B	-rw-r--r--	2020-11-05 09:00
flip.md	300 B	-rw-r--r--	2020-11-05 09:00
orientation.md	425 B	-rw-r--r--	2020-11-05 09:00
pixel-density.md	671 B	-rw-r--r--	2020-11-05 09:00
quick-reference.md	2.55 KB	-rw-r--r--	2020-11-05 09:00
relative-dimensions.md	494 B	-rw-r--r--	2020-11-05 09:00
size.md	1.8 KB	-rw-r--r--	2020-11-05 09:00
watermarks.md	4.33 KB	-rw-r--r--	2020-11-05 09:00

Rename

---
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
<img src="kayaks.jpg?w=300&h=300&fit=crop">
~~~

[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?w=300&h=300&fit=crop)](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
<img src="kayaks.jpg?w=300&h=300&fit=crop-left">
~~~

### 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
<img src="kayaks.jpg?w=300&h=300&fit=crop-25-75">
~~~

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
<img src="kayaks.jpg?w=300&h=300&fit=crop-25-75-2">
~~~

## Crop `crop`

Crops the image to specific dimensions prior to any other resize operations. Required format: `width,height,x,y`.

~~~ html
<img src="kayaks.jpg?crop=100,100,915,155">
~~~

[![© Photo Joel Reynolds](https://glide.herokuapp.com/1.0/kayaks.jpg?crop=100,100,915,155)](https://glide.herokuapp.com/1.0/kayaks.jpg?crop=100,100,915,155)