Skip to content

Document the images features fit: squeeze and trim: border #23862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 22, 2025
Merged

Document the images features fit: squeeze and trim: border #23862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/content/partials/images/fit.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ Affects interpretation of `width` and `height`. All resizing modes preserve aspe
Image will be shrunk and cropped to fit within the area specified by `width` and `height`. The image will not be enlarged. For images smaller than the given dimensions, it is the same as `scale-down`. For images larger than the given dimensions, it is the same as `cover`. See also [`trim`](#trim)
- `pad`\
Resizes to the maximum size that fits within the given `width` and `height`, and then fills the remaining area with a `background` color (white by default). This mode is not recommended, since you can achieve the same effect more efficiently with the `contain` mode and the CSS `object-fit: contain` property.

- `squeeze`
Resizes the image to the exact width and height specified. This mode does not preserve the original aspect ratio and will cause the image to appear stretched or squashed.
<Tabs>
<TabItem label="URL format">
```js
Expand Down
34 changes: 34 additions & 0 deletions src/content/partials/images/trim.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,38 @@ Specifies a number of pixels to cut off on each side. Allows removal of borders
cf: {image: {trim: {top: 12, right: 78, bottom: 34, left: 56, width:678, height:678}}}
```
</TabItem>
</Tabs>

The API also supports automatic border removal based on color. This can be enabled by setting `trim=border` for automatic color detection, or customized with the parameters below.

`trim.border.color`
The border color to trim. Accepts any CSS color using CSS4 modern syntax, such as `rgb(255 255 0)`. If omitted, the color is detected automatically.

`trim.border.tolerance`
The matching tolerance for the color, on a scale of 0 to 255.

`trim.border.keep`
The number of pixels of the original border to leave untrimmed.

<Tabs>
<TabItem label="URL format">
```js
trim=border

OR

trim.border.color=%23000000
trim.border.tolerance=5
trim.border.keep=10
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {trim: "border"}}

OR

cf: {image: {trim: {border: {color: "#000000", tolerance: 5, keep: 10}}}}
```
</TabItem>
</Tabs>
Loading