сделать изменение размера слайд-шоу с окном браузера

Question

Я хочу, чтобы изображения в моем слайд-шоу, которые служат фоном для моего веб-сайта для изменения размера, как это делает браузер. Ниже приведен код, который, похоже, пока ничего не меняет.

$(document).ready(function() { 
 
    $('#slideshow').cycle({ 
 
    fx: 'fade', 
 
    pager: '#smallnav', 
 
    pause: 1, 
 
    speed: 1800, 
 
    timeout: 8500 
 
    }); 
 
});

#slideshow, 
 
img.bgM { 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -9999; 
 
}

<div id="slideshow"> 
 
    <img src="images/back/1.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/2.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/3.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/4.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/5.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/6.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/7.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/8.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/9.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/10.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/11.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/12.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/13.JPG" alt="image1" class="bgM" /> 
 
    <img src="images/back/14.JPG" alt="image1" class="bgM" /> 
 
</div>

Answer 1

DEMO
Плагин используется дает ширину и высоту в px больше, что его установка их в качестве встроенного стиля, который имеет самый высокий приоритет, чтобы преодолеть это, вы можете использовать !important если там не так, но если вы даете max width и max-height вам не потребуется !important

$(document).ready(function() { 
 
    $('#slideshow').cycle({ 
 
    fx: 'fade', 
 
    pager: '#smallnav', 
 
    pause: 1, 
 
    speed: 800, 
 
    timeout: 500 
 
    }); 
 
});

#slideshow, 
 
.bgM { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    position: fixed; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js"></script> 
 
<div id="slideshow"> 
 
    <img src="http://spicyip.com/wp-content/uploads/2015/04/open-source-software-1.jpg" alt="image1" class="bgM" /> 
 
    <img src="http://www.rapidsoftsystems.com/img/nimages/opensource.gif" alt="image1" class="bgM" /> 
 
</div>

Пожалуйста, обратите внимание:
, если вы используете плагин как слайдер, который вы использовали здесь, пожалуйста, сделать работу демо так волонтер может легко сказать вам, где вы делаете ошибку
FYI: если вы используете JQuery плагин CDN вы можете найти каждую библиотеку jQuery в этом, которая будет полезна