Using Gatsby image sharp, image height is weird (CSS)
April 22, 2020 at 6:06pmUsing Gatsby image sharp, image height is weird (CSS)
April 22, 2020 at 6:06pmI'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
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 ?
Or you can retrieve the
presentationHeight/presentationWidth from GraphQLYou could also reduce the size of the image
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?