Making Materialize slider responsive

Question

I'm trying to make Materialize slider responsive using a CSS, but it's doesn't work properly. when I test my code with the adaptive view of Firefox, I get slider images responsive with a grey background much bigger than the height of the slider images(as you can see below).

screen shot size 360×640

Answer 1

Try this, works for me

 .slider .slides {
    background-color: transparent;
    margin: 0;
    height: 400px;
}

.slider .slides li img {
    height: 100%;
    width: 100%;
    background-position: center;
    background-size:100% auto;
    background-repeat: no-repeat;
}