Skip to content

Resize position using percentages #4461

@oscarotero

Description

@oscarotero

Feature request

When resizing images with cover, it's possible to define an origin position, which by default is centre. Other options are top, right top, right, etc. I'd like to be able to use percentages for a more precise position. For example 25% 75%.

What are you trying to achieve?

I want to be able to generate different image sizes maintaining a precise centered position. And sometimes it's not 0% (left) or 50% (center) but something between. This is something that object-position allows to do.

When you searched for similar feature requests, what did you find that might be related?

According to the docs, there are other ways to define the center, using gravity or strategy, that are fine for automated resizing. But I couldn't find any way to set specific coordinates.

What would you expect the API to look like?

Something like this:

sharp(input)
  .resize(200, 300, {
    fit: 'cover',
    position: '25% 75%',
  })

Or maybe an array of float values:

sharp(input)
  .resize(200, 300, {
    fit: 'cover',
    position: [0.25, 0.75],
  })

What alternatives have you considered?

None

Please provide sample image(s) that help explain this feature

The hero image in this page has a background-position of 30% horizontal and 25% vertical, to show always the head of Cleopatra at any size.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions