{Materialize CSS} how to make a 16:9 aspect ratio slider?

I'm currently in the progress of making a website and I stumbled upon the problem that the slider used in Materialize (http://materializecss.com/media.html) is not 16:9 so on mobile the slider is way too high.

How can I achieve a 16:9 slider with Materialize?

This is my code:

    <div class="slider">
        <ul class="slides">
            <li>
                <img src="images/slider-1.png" class="responsive-img"> 
                <div class="caption center-align">
                    <h2><span>Welkom bij Meteor Design</span></h2>
                </div>
            </li>
        </ul>
    </div>