I am currently working on a website called neongirslband.ru where the first row functions as a slider. While it looks great on screens with a resolution of 1920px, the photos get cropped on devices with lower resolutions such as phones and tablets. Is there a way to automatically resize the photo based on the current resolution? Am I missing something here?
You can find the site hosted on github: https://github.com/AlexKotik/NeonSite
...
<div class="row" id="Photo">
<div class="slider">
<ul class="slides">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
</div>
</div>
...
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider({
fullWidth: true,
interval: 5000,
height: 800
});
});
</script>