menu
announcement

Spectrum will become read-only on August 10, 2021. 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
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
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
  • reply
  • like
Try setting imgStyle={{ objectFit: 'contain' }}.
  • reply
  • like
hey Jeremy! that didnt help unfortunately..
  • reply
  • like
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
  • reply
  • like
  • reply
  • like
This is what I get when it's objectFit: 'cover'
  • reply
  • like
  • reply
  • like
This is what I get when I adjust the style to be objectFit: 'contain'
  • reply
  • like
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
  • reply
  • like
yes, that <div> is what gives it its height. That is set here
  • reply
  • like
I see, but then if you would check another post, how come the portrait image is being shown as is it's supposed to ?
  • reply
  • like
Probably has to do with the aspect ratio of the image
  • reply
  • like
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?
  • reply
  • like
You can adjust the aspect ratio of the image
  • reply
  • like
Or you can retrieve the presentationHeight/presentationWidth from GraphQL
  • reply
  • like
You could also reduce the size of the image
  • reply
  • like
This is what gets downloaded on my computer. The size of the image + the aspect ratio is what is causing that to happen
  • reply
  • like
ahhhh
  • reply
  • like
its too long i suppose?
  • reply
  • like
by size you mean file size or dimensions?
  • reply
  • like
dimensions
  • reply
  • like
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
  • reply
  • like
Yes indeed, I set a max-width property to 570px;
  • reply
  • like
Show more messages