menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Gatsby

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
Team

Using Gatsby image sharp, image height is weird (CSS)

April 22, 2020 at 6:06pm

Using Gatsby image sharp, image height is weird (CSS)

April 22, 2020 at 6:06pm
I'm almost convinced that I'm being stupid, but i've spent a significant amount of time on this...: here we have a post: https://warehouse.netlify.app/events/2020-04-03-hordaland-kunstsenter-bergen-art-book-fair/ and an image that gets uploaded through the CMS is Portrait, but in the post it turns into Landscape;; and it seems to be the only post with such an issue(so far), I think the culprit is somewhere around .gatsby-image-wrapper css class could someone guide me in the right direction? to have the image display as its supposed to be displayed (Portrait)

April 22, 2020 at 6:12pm
Something with the div not having a height
Try setting imgStyle={{ objectFit: 'contain' }}.
hey Jeremy! that didnt help unfortunately..
The height of the image, currently, is determined by the aspect ratio. So, the height is essentially constrained by the width, which is determined by the size of .gatsby-image-wrapper (currently width: 80% and max-width: 570px). The problem with it being objectFit: 'cover' is that the image being downloaded exceeds the size of the container; since overflow is hidden, the image is being cropped. objectFit: 'contain' should restrain the bounds of the image inside of its container
This is what I get when it's objectFit: 'cover'
This is what I get when I adjust the style to be objectFit: 'contain'
well what's a bit odd is that rn the only thing that is giving the gatsby-image-wrapper a height is this div underneath it with a weird padding 67.3541% (see screenshot). Giving gatsby-image-wrapper a fixed height lets say 570px fixes the problem but then the aspect ratio is twisted
yes, that <div> is what gives it its height. That is set here
I see, but then if you would check another post, how come the portrait image is being shown as is it's supposed to ?
Probably has to do with the aspect ratio of the image
also previously maybe you noticed that objectFit: 'contain makes the image quite a bit smaller. Maybe you have an idea how to fix this in some other way?
You can adjust the aspect ratio of the image
Or you can retrieve the presentationHeight/presentationWidth from GraphQL
You could also reduce the size of the image
This is what gets downloaded on my computer. The size of the image + the aspect ratio is what is causing that to happen
its too long i suppose?
by size you mean file size or dimensions?
A good way to pre-optimize your images is to resize them to the absolute max you would ever want to show. I assume you don't want those images to fill the entire height of the screen, even at the largest screen sizes?
Edited
Yes indeed, I set a max-width property to 570px;
Show more messages