I can not make the dynamic width of the images in the web site slider (HTML + CSS + JS). When opening a browser window, the width of the first slide is the full width of the window (as it should be), but if you stretch / expand the browser window, the image width does not change and subsequent slides go as wide as it was when you initially opened the page in the browser. I tried the width of 100%, auto, inherit did different variations of object-fit, but this did not result in the result. I will be grateful for the help.

#slider { width: 100%; max-width: 1920px; height: -moz-calc(100vh - 100px); height: -webkit-calc(100vh - 100px); height: -o-calc(100vh - 100px); position: relative; display: block; margin: 0px auto; overflow: hidden; border-radius: 3px; } #slider1 { width: 100%; max-width: 1920px; height: -moz-calc(100vh - 100px); height: -webkit-calc(100vh - 100px); height: -o-calc(100vh - 100px); position: absolute; display: block; } .slider_items { width: 100%; max-width: 1920px; height: -moz-calc(100vh - 100px); height: -webkit-calc(100vh - 100px); height: -o-calc(100vh - 100px); } .slider_info { width: 100%; height: 70px; display: inline-block; bottom: 90px; position: relative; background: rgba(104,204,204,.3); z-index: 99; } .slider_img { width: inherit; max-width: 1920px; height: -moz-calc(100vh - 100px); height: -webkit-calc(100vh - 100px); height: -o-calc(100vh - 100px); } 
 <div id="slider"> <div id="slider_pager"></div> <div id="slider1" align="center"> <div class="slider_items"> <img class="slider_img" src="//placehold.it/350x150"/> <div class="slider_info"> <h2>Slide1 title</h2> <p>This is the description for slide1 <a href="#">Learn more</a></p> </div> </div> <div class="slider_items"> <img class="slider_img" src="//placehold.it/350x150"/> <div class="slider_info"> <h2>Slide2 title</h2> <p>This is the description for slide2 <a href="#">Learn more</a></p> </div> </div> </div> </div>

  • instead of max-width, use another one, say for img make display: block; and width: 100%; But do not specify the height - it should work - user33274
  • jsfiddle.net/atlanta/k0LL9oun that's about what should work out - this is not a slider but the size of the photos for example - user33274
  • @Alexandr Show JS slider. - Gleb Kemarsky

2 answers 2

FlexSlider to help you, it is initially adaptive

HTML:

 <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> <li> <img src="slide4.jpg" /> </li> </ul> </div>

Js:

 $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); 
     window.onresize = function(){ location.reload();}

    and in CSS width:100% , if I understand you correctly

    • Here so a masterpiece with onresize . Hold a minus. - Qwertiy ♦
    • 3
      I will even bury myself - andreymal
    • @andreymal I even met such creativity ... True in the time of the people.ru ... - Athari