Materialize making slider images responsive

Question

I'm trying to develop a website with Materialize and there is a slider in site. Materialize is responsive and working well at various resolutions. However, When I decrease the screen size, the slider width is decreasing as well (as it should be). But the image in it just getting cropped instead of scaling it to the size of the slider. I added the responsive-img class to the img but nothing changed.

Slider code

<div class="slider">
    <ul class="slides">
        <li>
            <img src="images/slider/slide_1.jpg">
            <div class="caption center-align">
                <h3>Eraltek Kurumsal</h3>
                <h5 class="light grey-text text-lighten-3">Sitemize hoşgeldiniz</h5>
            </div>
        </li>
        <li>
            <a href="panoramic/panoramic.html">
                <img src="images/slider/slide_2.jpg">
                <div class="caption right-align">
                    <h3>Eraltek Mağaza</h3>
                    <h5 class="light yellow-text text-darken-1">360 derece mağaza turu için tıklayınız</h5>
                </div>
            </a>
        </li>
        <li>
            <img src="images/slider/slide_3.jpg">
        </li>
        <li>
            <img src="images/slider/slide_4.jpg">
        </li>
        <li>
            <img src="images/slider/slide_5.jpg">
        </li>
    </ul>
</div>

Answer 1

Try to define in your css file

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

Answer 2

You should try adding a css

max-width : 100%;

to the <img> tag. Hope this will resolve the issue. Also don't forget to add responsive-img class to <img>