### Discussed in https://github.com/quarto-dev/quarto-cli/discussions/2990

<div type='discussions-op-text'>

<sup>Originally posted by **mcanouil** October 23, 2022</sup>
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 but`max-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.
<img width="741" alt="Screenshot of a grid listing made with quarto using a three columns layout and showing two cards. On the left a card with an image properly scaled without cropping and on the right a image vertically cropped due to css height property set to 150 pixels" src="https://user-images.githubusercontent.com/8896044/197394786-d40b57a1-bad5-456c-bd76-8c523765f329.png">

A video to show the resizing issue of setting `height`.

https://user-images.githubusercontent.com/8896044/197395474-62bf6851-1f4e-47bc-8f8c-0b067c1e79f4.mov

</div>
dragonstyle
2022-10-23T20:24:05Z
dragonstyle
v1.4
open
Replace default `height` for "banner image" in grid listing by `max-height`
https://github.com/quarto-dev/quarto-cli/issues/2999