See how we built our intranet. Live + Q&A, June 30 →

How to auto-resize Sanity image-url for responsive parent div?

1 replyLast updated: Nov 29, 2025
for a sanity image-url object, how do i get an image returned which will autosize appropriately for my parent div bounding box, that will auto-resize as the screen size changes? https://www.sanity.io/docs/image-urls#fit-object-object
AI Update

When working with Sanity image URLs, you can create responsive images that auto-resize based on screen size by combining several URL parameters. Here's how to approach this:

Basic Responsive Strategy

The key is using the fit parameter along with width/height constraints. For an image that automatically sizes to fit within a parent div's bounding box, use:

?fit=max&w=[maxWidth]&h=[maxHeight]

The fit=max option ensures the image fits within the box you specify without ever scaling up beyond its original dimensions. This prevents small images from becoming pixelated.

Other Useful fit Options

  • fit=clip - Resizes to fit within bounds without cropping or distorting
  • fit=fill - Fits within bounds and fills empty space with a background color (use with &bg= parameter)
  • fit=crop - Crops the image to fill the specified dimensions exactly

Responsive Implementation Example

For responsive images across different screen sizes, you'd typically:

  1. Use CSS to make the image responsive (width: 100%; height: auto;)
  2. Generate multiple image URLs at different sizes using Sanity's URL parameters
  3. Use srcset or <picture> elements to serve appropriate sizes
<img 
  src="https://cdn.sanity.io/images/project/dataset/image-id.jpg?w=800&fit=max"
  srcset="
    https://cdn.sanity.io/images/project/dataset/image-id.jpg?w=400&fit=max 400w,
    https://cdn.sanity.io/images/project/dataset/image-id.jpg?w=800&fit=max 800w,
    https://cdn.sanity.io/images/project/dataset/image-id.jpg?w=1200&fit=max 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  style="width: 100%; height: auto;"
  alt="Description"
/>

Additional Tips

  • Auto-format: Add ?auto=format to automatically serve the most optimized format (WebP, AVIF) based on browser support
  • Quality: Use &q=75 to balance quality and file size (default is 75 for JPG/WebP)
  • Always use integers: Non-integer values for w and h can cause performance issues

Helper Library

Consider using the @sanity/image-url helper library, which makes it easier to generate these URLs programmatically with proper parameters for responsive images.

Show original thread
1 reply

Was this answer helpful?

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Related answers

Get more help in the community Discord

Related contributions

Auto-generate alt text for Media Library assets

FeaturedOfficial

Automatically generate accessible, multilingual alt text for images in your Sanity Media Library using Agent Actions and Sanity Functions

Bram Doppen

Bram Doppen

First Published Timestamp Function

FeaturedOfficial

Automatically track when content was first published with a timestamp that sets once and never overwrites, providing reliable publication history for analytics and editorial workflows.

Knut Melvær

Knut Melvær

Automatically tag blog posts

FeaturedOfficial

AI-powered automatic tagging for Sanity blog posts that analyzes content to generate 3 relevant tags, maintaining consistency by reusing existing tags from your content library.

Ken Jones Pizza
Knut Melvær

Ken Jones Pizza and 1 other