Watch a live product demo 👀 See how Sanity powers richer commerce experiences

How to Get the Aspect Ratio of an Image From the Image URL Builder Tool

6 replies
Last updated: Apr 21, 2022
Hi!
Is there a way to get the aspect ratio of an image from the image url builder tool? I want to specify the width and height of all my images to avoid layout shifting, but I can't really find a way to figure out the height, given that I want the image to preserve its intrinsic aspect ratio.
Apr 21, 2022, 8:02 AM
Could this link help you? I think that in your case you need to handle assets, and not an image url
https://www.sanity.io/docs/assets
Apr 21, 2022, 8:56 AM
More over, having width and height of the image you could calculate the aspect ratio.
https://www.omnicalculator.com/other/aspect-ratio
Apr 21, 2022, 8:58 AM
One solution would be to create the container for the image, within a div or a picture tag, and use the url as a background. So there you can specify height or the like.
A second solution might be to set the img tag in a div, and on the image tag you could use the css property object-fit: cover to not have any overflow or stretched image.
Apr 21, 2022, 9:07 AM
Hope it helped
user U
🙂
Apr 21, 2022, 9:07 AM
hm… well, thanks for putting me on the right track. Turns out, I can fetch the aspect ratio from an image with

image.asset->metadata.dimensions.aspectRatio
Apr 21, 2022, 9:25 AM
I see you found the answer! 🙂 We have a comprehensive article about image metadata in the docs if you have further needs in that regard!
Apr 21, 2022, 12:19 PM

Sanity.io – build remarkable experiences at scale

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

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing