object-fit: cover; not working the image looks out of focus, distorted, tried a lot of workarounds, still nothing

Question

the problem is this background-size: cover; does not work.

you can check code using F12 key , element inspector:

i am also using free license flux slider a css slider

test website example minimal reproducible example:

minimal reproducible example

html code:

 <div id="slider" class="wow fadeIn" data-wow-delay="1s">
       
       
        <img src="images/home-bg-slideshow1.jpg">
        <img src="images/home-bg-slideshow2.jpg">
        <img src="images/home-bg-slideshow3.jpg">
        <img src="images/home-bg-slideshow4.jpg">
        <img src="images/home-bg-slideshow5.jpg">
        <img src="images/home-bg-slideshow6.jpg">
        <img src="images/home-bg-slideshow7.jpg">
        <img src="images/home-bg-slideshow8.jpg">

       
      </div>

css code:

 html,
        body {
          width: 100vw;
          height: 100vh;
          box-sizing: border-box;
          margin:0;
          padding:0;
        }
        
        #slider {
          height: 100%;
          width: 100%;
          overflow: hidden;
         /* background-size: cover;*/
         object-fit: cover;
        }
        
        #slider * {
          background-repeat: no-repeat;
        /*background-size: 100% 100%;*/
        /*  background-size: cover;*/
        
          height: 100% !important;
          width: 100% !important;
          object-fit: cover;
        }

this is the output, a total mess , object-fit: cover; discarded, see:

also: background-size: cover;` does not work, the image gets distorted, see:

this also does not work:

background-size: 100% 100%;

see..... : Image looks totally distorted in mobile and desktop, see:

used this question too ( object-fit: cover; suggested here, did not worked) : How do I fit an image (img) inside a div and keep the aspect ratio? but as you see in my ticket the solution does not work here.