0

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:

enter image description here

enter image description here

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

enter image description here

enter image description here

this also does not work:

background-size: 100% 100%;

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

enter image description here

enter image description here

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.

swm
  • 49
  • 1
  • 1
  • 10
  • Post the HTML and CSS in a [mcve]. It's not very helpful when CSS is there but not the HTML . – zer00ne Mar 20 '22 at 00:44
  • object-fit is for img and video element. background-size works if you have provided a background-image with url function. You may need to specify width and height attributes in html for img elements if it gets distorted – webCatDev Mar 20 '22 at 05:30
  • It's not clear from the CSS you have provided whether you are trying to size a background image (and if you are, where is it set?) or trying to size an HTML img element (in which case please show the element and any relevant ancestor(s). – A Haworth Mar 20 '22 at 10:16
  • Your aspect ratios of the image and containing elements are incongruent. – morganney Mar 20 '22 at 13:43
  • added flux slider the slider i am using and html code also added test website – swm Mar 20 '22 at 16:04

0 Answers0