我正在尝试使用Materialize开发一个网站,其中包含一个幻灯片。Materialize具有响应式设计,在不同的分辨率下运行良好。然而,当我缩小屏幕尺寸时,幻灯片的宽度也会减小(这是应该的)。但是其中的图像只是被裁剪而不是按比例缩放到幻灯片的大小。我为
img
添加了responsive-img
类,但什么都没有改变。
幻灯片代码
<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>