Inserting an image into a card, with dynamic resizing

[jack-davison]

Good morning,

I note in https://observablehq.com/framework/markdown that:

Cards can be used on their own, but they most often exist in a grid. Cards can contain whatever you like, including text, images, charts, tables, inputs, and more.

I also know you can include an image like:

![](path-to-img.png)

I can't seem to find an example of a card being in an image, but also ensuring the image doesn't spill over the outside of the card. e.g., if I do:

<div class="card">

![](path-to-img.png)

</div>

If my image is too wide it'll just spill out of the RHS of the card.

Is there a recommended way to set the width of an image to be the width of the card? Ideally with object-fit: cover behaviour so the card doesn't drastically change height if the window is resized.

For a plot you'd do the below, so I don't know if there's a recommended equivalent for images!

${resize((width) => Plot.plot({...})

Cheers

[jack-davison]

Apologies - I've answered my own question with what should have been the obvious answer!

<img src="image.png" width="100%">