diff --git a/src/content/partials/images/fit.mdx b/src/content/partials/images/fit.mdx index 45de9c800169924..585dee6f359a90e 100644 --- a/src/content/partials/images/fit.mdx +++ b/src/content/partials/images/fit.mdx @@ -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. ```js diff --git a/src/content/partials/images/trim.mdx b/src/content/partials/images/trim.mdx index a2c4f558f40cfdf..befaafd5ca616e2 100644 --- a/src/content/partials/images/trim.mdx +++ b/src/content/partials/images/trim.mdx @@ -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}}} ``` + + +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. + + + + ```js + trim=border + + OR + + trim.border.color=%23000000 + trim.border.tolerance=5 + trim.border.keep=10 + ``` + + + ```js + cf: {image: {trim: "border"}} + + OR + + cf: {image: {trim: {border: {color: "#000000", tolerance: 5, keep: 10}}}} + ``` + \ No newline at end of file