Making Materialize slider responsive - css

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).
.slider .slides li img {
background-size: 100% auto;;
background-repeat: no-repeat;
}
<div class="row">
<div class="slider " >
<ul class="slides ">
<li>
<img class="responsive-img" id="img" src="{{ asset('font/images/IMG_61.jpg') }}">
</li>
<li>
<img class="responsive-img" id="img" src="{{ asset('font/images/IMG_53.jpg') }}">
</li>
<li>
<img class="responsive-img" id="img" src="{{ asset('font/images/IMG_2.jpg') }}">
</li>
</ul>
</div>
</div>
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;
}

Answer 2

You literally have add:
.fullscreen
to the slider and this works, as shown in the documentation. Patience to read people, that's all it takes :)
https://materializecss.com/fullscreen-slider-demo.html
Codepen showing markup and initialisation:
https://codepen.io/doughballs/pen/YzXqdPO
<div class="slider fullscreen">
<ul class="slides">
<li class="active" style="opacity: 1; transform: translateX(0px) translateY(0px);">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url("https://images.unsplash.com/photo-1464817739973-0128fe77aaa1?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=");"> <!-- random image -->
<div class="caption center-align" style="opacity: 1; transform: translateX(0px) translateY(0px);">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li class="" style="opacity: 0; transform: translateX(0px) translateY(0px);">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url("https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7");"> <!-- random image -->
<div class="caption left-align" style="opacity: 0; transform: translateX(-100px);">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li class="" style="opacity: 0; transform: translateX(0px) translateY(0px);">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url("https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5");"> <!-- random image -->
<div class="caption right-align" style="opacity: 0; transform: translateX(100px);">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
<ul class="indicators"><li class="indicator-item active"></li><li class="indicator-item"></li><li class="indicator-item"></li></ul></div>

Answer 3

here is the solution that worked for me:
Manually assigning the height for the slider as 250px for small and medium-sized devices and 600px slider height for large devices (devices with more than 600px width)
#media only screen and (max-width: 600px) {
.slides {
height: 250px !important;
}
.slider {
height: 250px !important;
}
}
#media only screen and (min-width: 600px) {
.slides {
height: 600px !important;
}
.slider {
height: 600px !important;
}
}