Replace default height for "banner image" in grid listing by max-height

[dragonstyle]

Discussed in #2990

^{Originally posted by mcanouil October 23, 2022}
Hi,
currently, the grid listing has a default height of 150px for top image in the card which causes the image to be "cropped" in nearly all situations.
Instead, I would suggest to not set height property butmax-height to allow responsive scaling of the image without cropping the image.
For example, on the left, manually defined max-height, while on the right it's the default from the grid listing.

A video to show the resizing issue of setting height.

resizing.mov

[dragonstyle]

I think that this item is likely more specifically creating a new type of listing layout that permits flexible grid sized (per the attached conversation). Moving to 1.4

[giabaio]

Can I please ask if there's a follow up to this? I seem to have a problem that I think is related to this on this site; images are rescaled but the aspect ratio is not respected. As you make the screen smaller, then 2 things happen:

1. The width of the columns becomes smaller and smaller and for some screen resolution, it's just not great (too narrow);
2. The image is rescaled but the aspect ratio does not hold --- is there a way to force it?
   Thanks!

[dragonstyle]

I seem to have a problem that I think is related to this on this site; images are rescaled but the aspect ratio is not respected.

I think switching to max-height as suggested here really won't fix the width issue with this page - it merely allows the image height to change in order to preserve the aspect ratio. For example:

But, this has the effect of reducing the alignment of items within the grid, as titles and other data are in different spots, which I don't think we want in our default grid layout. Instead, perhaps you could consider changing the number of columns using grid-columns under listing (it defaults to 3) or perhaps changing the layout width of the page that this grid is on using page-layout: full which will make the content area wider.

[mcanouil]

As discussed initially in the discussion.
The best option would likely be around what Masonry.js does.
https://masonry.desandro.com/
(This would also bring "image gallerie" to Quarto)

[giabaio]

Thanks both. I can look into this more closely, but I guess using masonry would basically amount to hacking the complied html files to add the relevant bits (including potentially a java script)?