> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embededitor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Crop & Aspect Ratio

> Crop, rotate and flip the photo, open it at a ratio or lock one, and cap the output size.

<video autoPlay muted loop playsInline src="https://mintcdn.com/feliperohde/qjMwuUjVercQQh3U/images/crop.mp4?fit=max&auto=format&n=qjMwuUjVercQQh3U&q=85&s=347335d9d607226a2412196322241f78" />

Open the crop at a ratio, lock it, and control the size and type of the file Save writes.

## What the User Can Do

The Adjust tool holds the crop. It's in every edition.

![The Adjust tool on a mountain lake: 3:4 picked in the ratio strip, its window centered on the peak and its reflection, the photo outside it dimmed, Done under the strip](https://mintcdn.com/feliperohde/YwW874QNSEhHkBQq/images/crop.webp?fit=max\&auto=format\&n=YwW874QNSEhHkBQq\&q=85\&s=9906eb3bcf399dc4b15fcb9d64899b44)

| Control | What it does |
| - | - |
| Crop window | Drag a corner or an edge to resize it. Drag the photo under it to pan. |
| Zoom | Wheel, pinch or the Scale slider, from 100% to 1000%. |
| Ratio | Free, 1:1, 1:2, 3:4, 9:16, 16:9, 4:3 and 2:1. |
| Focus | Places the window on the photo's subject (Auto) or its middle (Center). |
| Straighten | A ruler from −45° to 45° in 0.1° steps, with a magnet at 0. |
| Rotate | Turns the photo 90° to the left. |
| Flip | Mirrors the photo left to right. |

A ratio takes the largest window of that shape, placed where Focus says. A handle follows the finger as far as the toolbar, the editor's sides and the crop pill. Let go, the window rests there for a moment, then springs back to fill the photo's area, centered, as on the iPhone.

![The same 3:4 crop on an iPhone: the window over the photo, the ratio strip under it from 1:1 to 16:9, and Done](https://mintcdn.com/feliperohde/YwW874QNSEhHkBQq/images/crop-phone.webp?fit=max\&auto=format\&n=YwW874QNSEhHkBQq\&q=85\&s=c03a84757e514177e8d4e155f8456bcf)

## Open at a Ratio

`aspectRatio` is width / height. The user can still pick another ratio.

```tsx Banner.tsx theme={"dark"}
import { EmbedEditor } from '@embededitor/full/react';

// opens at 16:9 on the subject
const Banner = ({ src }: { src: string }) => (
	<EmbedEditor
		aspectRatio={16 / 9}
		src={src}
	/>
);
```

## Lock a Ratio

Add `aspectRatioLocked` to fix the ratio. The ratio selector is hidden.

```tsx Avatar.tsx theme={"dark"}
import { EmbedEditor } from '@embededitor/full/react';

// always square
const Avatar = ({ src }: { src: string }) => (
	<EmbedEditor
		aspectRatio={1}
		aspectRatioLocked
		src={src}
	/>
);
```

## Ratios

| `aspectRatio` | `aspectRatioLocked` | Opens with |
| - | - | - |
| a number | `true` | That ratio, even over a saved edit. |
| `null` | `true` | The ratio the opened state has: its own, or its crop's shape. |
| a number | `false` | That ratio for a new edit. A saved edit opens as it was saved. |
| `null` | `false` | A free crop. |

* Changing `aspectRatio` live applies as one step undo can take back.
* Changing the lock live starts a new undo history at the locked ratio, so undo can't free it.
* Two ratios within half a percent of each other count as one.

## Output Size and Type

```tsx Upload.tsx theme={"dark"}
<EmbedEditor
	maxHeight={2048}
	maxWidth={2048}
	outputQuality={80}
	outputType='image/jpeg'
	src={src}
/>
```

| Prop | Type | Default | What it does |
| - | - | - | - |
| `maxWidth` | `number` (1 or more) | none | The output's largest width, in px. |
| `maxHeight` | `number` (1 or more) | none | The output's largest height, in px. |
| `outputType` | `'image/jpeg' \| 'image/png' \| 'image/webp'` | the source's | The type Save and Share write. |
| `outputQuality` | `number` (0 to 100) | `90` | The JPEG and WebP quality. |

* Either cap alone limits its own side. Both fit the output inside both. The ratio is kept, and the output is never enlarged by a cap.
* The output never goes past 16.7 MP.
* A source that isn't JPEG, PNG or WebP (HEIC, AVIF, GIF…) saves as PNG unless you set `outputType`.
* The file keeps the source's name with the output's extension, or `image.<ext>` when it has none.

> [card] [Large Photos](https://docs.embededitor.com/features/large-photos.md)
>
> How photos over 16.7 MP are handled.

> [card] [Props](https://docs.embededitor.com/api-reference/props.md#crop)
>
> Every prop, with types and defaults.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.