image-url icon indicating copy to clipboard operation
image-url copied to clipboard

`.fit()` does not seem to have any effect

Open oskarengstrom opened this issue 1 year ago • 1 comments

Describe the bug

I'm trying to figure out how to have the returning image not "objectFit: cover" (zoom in and crop out parts of the image) when given manual height()/width(), but instead "objectFit: contain" (zoom out and create empty space).

From my understanding this is where .fit() comes in. But I can't seem to get that function to do anything at all - none of the strings from the docs seem to have any effect on the returning image.

Been trying the Slack help channel but to no avail. Is it just me misunderstanding the docs or is this a bug?

To Reproduce

// myImage is 1000 x 500

const src = imageUrlBuilder(client)
    .image(myImage)
    .fit("clip")
    .width(500)
    .height(500)
    .url();

<img src={src} />

Expected behavior

I expect a 500x500 image, with the image contained, and transparent/colored areas top/bottom.

Which versions of Sanity are you using?

"sanity": "3.63.0", "@sanity/image-url": "^1.1.0",

oskarengstrom avatar Nov 11 '24 09:11 oskarengstrom

You seem to be hitting this bug: https://github.com/sanity-io/image-url/issues/32

coreyward avatar Dec 27 '24 23:12 coreyward

You seem to be hitting this bug: #32

I appreciate!

nkorgik avatar Jul 19 '25 21:07 nkorgik