Correctly show image in listings

[giabaio]

Description

Hi there,
I have a (possibly) trivial question. We have a blog/magazine website (here) and use listings to describe the various posts.

All works great, but in some cases, because the image used to index a given article is in portrait format (or, in any case, it's longer than it is wide, for instance this) or when the core of the image is bang in the middle of the picture (like this), the preview in the listings kind of centres the picture and gives this weird result (like it cuts off head and legs and only shows the torso, in both cases above...).

I suspect I could cut the actual images, but is there an automated way to tell quarto that I want to align the image to the top, rather than the centre?

I hope I'm explaining myself and thanks for any suggestion!

[dragonstyle]

This a great question - I think we could add an option for this (and perhaps have a better default event). In the meantime, you should be able to add some CSS to target the image and align it - like:

.quarto-grid-item p.card-img-top > img {
  object-position: top
}

[giabaio]

Brilliant! Thank you very much! This does it --- as you say, it may be possible to fiddle even more, but this is now much nicer! Thank you!

[giabaio]

And, sorry to be a pain, but could this be done dynamically, like align to the top for some pics, but to the centre for others? Perhaps through the yaml of a given post?

[mcanouil]

Kind of related to:

• Replace default `height` for "banner image" in grid listing by `max-height`? #2990
• Replace default height for "banner image" in grid listing by max-height #2999