Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Discussion about scaling product images in Sanity with Next.js for an ecommerce platform, including suggestions for using the next-sanity-image library and enveloping the...

17 replies
Last updated: Jul 11, 2022
Hi guys, I'm new to sanity and just trying to get the hang of it introducing it with Nextjs for an ecommerce platform. I'm trying to se the main product image, but having an issue with the image scaling for the defined image size. Am I missing something?
Jul 8, 2022, 4:59 PM
Does it make a difference if you append 
.url()
to the end of your methods?

<img
  src={urlFor(productImg)
    .auto("format")
    .width(1000)
    .height(1000)
    .fit("fill")
    .url()}
  alt={productImg?.alt || `Photo of ${title}`}
/>
Jul 8, 2022, 6:26 PM
Thanks but no it doesn’t - I just want the image to scale to fit the container - but nothing I’ve tried works so far. It just always clips the image.
Jul 8, 2022, 8:37 PM
Thanks for confirming. Can you let me know what you get if you 
console.log(productImg)
(before your component’s 
return
of JSX)?
Jul 8, 2022, 8:48 PM
1. _{_key: ‘b7cf9331b38f’, type: ‘image’, asset: {…}} a. *asset*: {_ref: ‘image-1ecadba9d31e11105ff693d4c21f7ff1a5db33e0-1000x1333-png’, _type: ‘reference’}
b. *_key*: “b7cf9331b38f”
c. *_type*: “image”
d. [[Prototype]]: Object

Jul 8, 2022, 8:50 PM
Interesting. That seems good.
Can you try a smaller crop? maybe 300x300?
Jul 8, 2022, 8:52 PM
the image doesnt change size, just I can see the quality is reduced
Jul 8, 2022, 8:53 PM
just to be clear the image is going in a carousel
Jul 8, 2022, 8:56 PM
Oh good. That means the image being returned from 
urlFor
is being modified. I expect the rest will be done with CSS.
Jul 8, 2022, 8:56 PM
required result is that the image scales to fit in the defined size
Jul 8, 2022, 8:56 PM
keeping aspect ratio
Jul 8, 2022, 8:56 PM
at the moment its cropping the image which isnt desired
Jul 8, 2022, 8:57 PM
What does your CSS look like? Depending on your constraints, I would expect you’d get close with a non-clipping fit method like 
max
, and then CSS that’s something like (untested):

width: 100%;
max-width: 1000px;
display: block;
height: auto;

Jul 8, 2022, 9:17 PM
yeah im just taking a look at the carousel and I dont think its an issue with the image but something with the internal css in the carousel
Jul 8, 2022, 9:23 PM
Hey David, please use a single message to describe your problem so we can rely on a unique Slack thread. 😊
Jul 9, 2022, 9:11 AM
Ah ok thanks Kitty!
Jul 9, 2022, 12:50 PM
Ah yeah i had similar problems with scaling in nextJS.Sometimes your 
Image
should be enveloped by a 
div
with the specific css applied to it instead of the image component itself.Here you should use
next/image (if you don’t already use it of course 🙂 )
You might also try
this wonderful library , where things are handled via the 
<Image>
component, which has a lot of interesting features like responsive, intrinsic etc. working out of the box.
Example:

// the settings
const imageProps = useNextSanityImage(
		configuredSanityClient,
		mySanityData.image
	);

// your responsive Image
		<Img {...imageProps} layout="responsive" sizes="(max-width: 800px) 100vw, 800px" />
	);
);
I work exclusively with this one and am super happy (the 
div
-envelop helps here as well.)
Jul 11, 2022, 12:54 PM
Thanks for this, I was able to work around it for the moment using the div with specific css - although this library looks good and may try it.
Jul 11, 2022, 3:01 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?