Carousel showing <ol> as numbers, images of different sizes

please help this desperate guy! Been working on this issue since yesterday :smiley: I kindly ask for your help!
After planning my tribute page I started with the first part which includes a carousel.
I put the bootstrap, jQuery and js links in the settings respecting their specific section.
I wrote the carousel code, taking as example the one showed on w3school and customizing with my data.
The problems I have are the following:
-above the carousel there is an

    -the images have all different sizes, despite using the css code and despite specifying the same width and height in all the tag used.

    Here is the link to my pen

    What am I doing wrong?

Might be easier to use images of the same proportions.

How can I resize the images without compromising the resolution?

Make the images you resize smaller than the original. Then you won’t loose the resolution.