Crop images from a carousel

hello mates,

I would like to crop the images of my carousel but I don't know how to do it, I'm a beginner on grav.

I would also like my carousel not to take the whole width of my page, how should I proceed?
I use Shortcode Owl Carousel Plugin.

below is an image of my current carousel and my code

[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true]
<div style="background: url({{ page.media['inscription.png'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 1</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['identification.png'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 2</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['photocaution.png'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 3</h2>
  <p>foo</p>
</div>
[/owl-carousel]```

![Capture d’écran 2021-07-20 à 11.24.44|690x119](upload://7DyNv0LALQyOs4BhxhfLApRlZYV.jpeg)

Did you check the Media docs?
It would be something like:

{{ page.media['identification.png'].cropResize(200, 200).url }}

Yes but it doesn't work.
Maybe if i narrow the width of the carousel it would work, where do I have to make changes for this ?

What do you mean it doesn't work? What's the result now and what do you expect? Remember you have a background-size: cover, so visually there shouldn't be much difference (if at all, depending on original image size)

As for the width, I would guess it's a theme thing and you need to extend it and adjust template and/or CSS, but without more info, again, it's just a guess

Here is what I have

I want a more centered and less wide carousel so that the images appear properly

It looks like a pure CSS issue, but without seeing HTML and CSS not much we can advise