Skip to content
✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now
Get help on Slack

How to Autosize an Image within a Div and Resize for Screen Changes

1 replies
Last updated: Sep 4, 2021
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
Sep 4, 2021, 5:06 AM
nevermind, figured it out, this is what ended up working, i used as 
sx
prop on my 
<img>
tag ( i am using theme-ui) and that made the image scale according to the size of my window

            <div sx={{
              position: "relative",
            }}>
              <img
                src={imageUrlFor(buildImageObj(mainImage))
                  .width(1200)
                  .height(Math.floor((9 / 16) * 1200))
                  .fit("crop")
                  .auto("format")
                  .url()}
                alt={mainImage.alt}
                sx={{
                  width: "100%",
                  height: "100%"
                }}
              />
            </div>
Sep 4, 2021, 5:24 AM

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?