Создание адаптивного слайд-шоу изображений ⇐ CSS

[Anonymous]

Я экспериментировал со слайд-шоу изображений на своем веб-сайте. Он работает хорошо, когда я тестирую его на версии сайта для ПК, но на мобильном сайте он не масштабируется должным образом, соотношение каждого изображения неверно.
HTML:< /p>

Код: Выделить всё

[img]IMG_3725.jpg[/img]

[img]IMG_3953.jpg[/img]

[img]IMG_8098.jpg[/img]

CSS:

Код: Выделить всё

.slider {
width: 85%;
height: 100%;
border-radius: 10px;
text-align: center;
overflow: hidden;
position: relative;
left: 50%;
transform: translateX(-50%);
}

.slides {
width: 500%;
height: 500px;
display: flex;
}

.slides input {
display: none;
}

.slide {
width: 20%;
transition: 2s;
}

.slide img {
width: 100%;
height: 100%;
}

.slide-manual {
position: absolute;
width: 100%;
margin-top: -60px;
display: flex;
align-items: center;
justify-content: center;
}

.manual-button {
border: 2px solid #FFFFFF;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
margin: 15px;
}

.manual-button:hover {
background: #FFFFFF;
}

#radio-button1:checked~.one {
margin-left: 0;
}

#radio-button2:checked~.one {
margin-left: -20%;
}

#radio-button3:checked~.one {
margin-left: -40%;
}

#radio-button4:checked~.one {
margin-left: -60%;
}

#radio-button5:checked~.one {
margin-left: -80%;
}

.slide-automatic {
position: absolute;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-top: 440px;
}

.slide-automatic div {
border: 2px solid #FFFFFF;
padding: 5px;
border-radius: 10px;
transition: 1S;
margin: 15px;
}

#radio-button1:checked~.slide-automatic .auto-button1 ,
#radio-button2:checked~.slide-automatic .auto-button2 ,
#radio-button3:checked~.slide-automatic .auto-button3 ,
#radio-button4:checked~.slide-automatic .auto-button4 ,
#radio-button5:checked~.slide-automatic .auto-button5 {
background: #FFFFFF;
}

Javascript:

Код: Выделить всё

var counter = 1;
setInterval(function(){
document.getElementById('radio' + counter).checked = true;
counter++;
if(counter > 4) {
counter = 1;
}
}, 5000);

Я попробовал добавить в этот код CSS Media Query, чтобы соотношение каждого изображения оставалось неизменным при уменьшении размера экрана, но мне это не удалось.
Я также попробовал изменить код .slide img и смог сохранить соотношение изображения в слайд-шоу. Однако после того, как слайд-шоу перестало переходить от одного изображения к другому, оно словно замерло.

Код: Выделить всё

.slide img {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: 100%;
transform: translate(-50%, -50%);
}

Будем очень признательны за любые идеи о том, как сделать это слайд-шоу адаптивным.


Подробнее здесь: https://stackoverflow.com/questions/792 ... -slideshow