First of all, I would not recommend to use same class for different type of elements. For now you have Section, Slider and Images inside the slides with exactly same class.
Change style of Image inside the slide: instead of having height = 100% , make width=100% and height=auto
For make elements smoothly resizing dependent on browser/screen width make their width in %. It is working very good on images.
Hi this is still not exactly working for me. I have attached some screens shots to show you what i mean,
The first one shows the first slide with your recommended display, you can see the space underneath is grey which shows on resize. What i need is the carousal to fill the full screen like this screen on resize but the image needs to stay in the centre rather than not moving on resize. you can see the men in the boat is at the side and should be in the center.
You have to remember that image will always keep its aspect ratio (the proportional relationship between the image’s width and height). So…
With settings that I suggest images width will always be equal browser width. It means that when you make browser window smaller - image will rescale depend on browser(screen) width. It calls Responsive Image
With settings that you have images height will always be equal browser height. It means that you make browser window smaller - image will keep browser height but if image width will be bigger than browser it will look cropped.
Hope you understand my point. You will have to choose what settings you will use, anyway. Because if you will make image 100% width and 100% height is will lose its ratio.