baked into the images), nor on the client side (as part of gatsby-image, using object-fit: cover or similar). If I didn't ask for cropping specifically, I don't expect it to do any.
If this is what happens currently when you use maxHeight and maxWidth together, to me that seems unexpected. nothing gets stretched or squished) but crop the images (perhaps with more parameters to choose where the gravity is) so they fit in the aspect I've chosen, derived from the height and width parameters, with the nominal presentation size being the height and width I specified. And then I'd want it to keep the intrinsic aspect ratio (i.e. That might be called "crop" or "cover" or similar. In this case I'd expect to still send maxHeight and maxWidth as the same value, but to also ask for it to be cropped. Or I might want to display them in the same grid but with all of them cropped to be square. I set up the sizes parameter to fit my design, so that the browser will choose the appropriate file for the current viewport size. I'd expect there to be generated a set of images each with the original aspect ratio, at various sizes.
The above is what I would expect to happen if I set both maxHeight and maxWidth to the same value, and my styles set the element to be contained. The images generated should all have the original aspect ratio. In this case I'd want maxHeight and maxWidth to mean that the image should be resized so the presentation height and width both fit within these constraints, without cropping. My CSS will centre each within its container. I might want them not to be cropped, for them all to be contained within their squares. Now say we have a set of images we want to display in these squares. That means that "fluid" is what we want, if I understand all the options correctly. There might be different numbers of columns depending on the viewport width, and the squares may be different sizes depending on the viewport width. Say my design is to have a grid of squares. If I understand you correctly, then absolutely. This is something I've found is missing in the past I'm wondering if there's a situation where someone might actually want the behaviour I thought setting both maxHeight and maxWidth did.
Here's an example of the kind of thing it would be good for, in case my explanation wasn't very clear: I'd also prefer not have to manually create the different crops of the same image. The thumbnail grid is responsive, so I don't want to use fixed or resize.
#Dw cc fluid image width full
I'd like to produce square thumbnails from the original images which can be clicked to view the full image. One use case I can think of is a gallery of images with thumbnails. I think creating multiple images with resize will make it more challenging to use gatsby-img since I can't pass the result in directly.įluid has options for maxWidth and maxHeight, to constrain the image dimensions, but there doesn't seem to be a way to crop the image to a desired aspect ratio. I'm wanting to get a set of images (I guess it's called GatsbyImageSharpFluid ?) to pass into a gatsby-img component. Hi starting to think this may be more of a feature request than a question, then.