Resize an image in an ojs chuck (presentation revealjs)

[neocarto]

Is there a way to resize an image in an ojs chuck ? here for example, how to reduce the size of this map so that it can fit in a reveal.js presentation ? And how to change the style of the slider (because the text is big) ?

viewof k = Inputs.range([-100, 100], {
  step: 10,
  value: 0
})
import { map } with { k as k } from "@neocartocnrs/how-to-lie-with-maps"
map

[cscheid]

here for example, how to reduce the size of this map so that it can fit in a reveal.js presentation ?

I can't seem to reproduce this issue. When I resize the window, that imported map resizes dynamically for me:

3237-comment.mov

And how to change the style of the slider (because the text is big) ?

This is something we'd like to do better, but there's no out-of-the-box support right now. Still, you should be able to use CSS to do it.

[neocarto]

Yes, the map is resized when I minimize the window. But by default, the map goes over in height. So I was wondering if it was possible to fix the size of a figure, in the ojs chuck settings,

[cscheid]

We can't do that in general because the standard flow of both observablehq documents and html documents is vertical. If we use automatic height resizing by default, then you'd have every figure taking all of the screen. You will need to create your own style for it. Adding something like max-height: 50vh or something like that should work (I tried it). Note that your SVG will need fixing, because it doesn't clip the map horizontally: