Materialize如何使滑动图片响应式？

Question

我正在尝试使用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>

- Miral

---

我遇到了相同的问题，我发现默认高度并没有在所有地方被正确地覆盖。 - landed

我解决了我的问题，因为我在一个更高的元素中有一个旋转木马类，它被溢出隐藏了。所以现在对我来说它是有效的。 - landed

Answer 1

您应该尝试向 <img> 标签添加 CSS

max-width: 100%;

希望这可以解决问题。同时，不要忘记向 <img> 添加 responsive-img 类。

- Sanath Kumar

Answer 2

尝试在你的CSS文件中定义

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

- Kochi

Answer 3

尝试

.slider li img{max-width:100%;height:auto;}

- Gilles Kagarama

Answer 4

使用img标签和img-responsive类。(您正在使用responsive-img，它是Bootstrap类。在Materialize设计中无法正常工作)

   $(document).ready(function () {
       $('.slider').slider({full_width: true});
   });

 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">

 <div class="slider">
            <ul class="slides">
                <li>
                    <img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
                    <div class="caption center-align">
                        <h3>This is our big Tagline!</h3>
                        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                    </div>
                </li>
                <li>
                    <img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
                    <div class="caption left-align">
                        <h3>Left Aligned Caption</h3>
                        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                    </div>
                </li>
            </ul>
        </div>

- Varun Sharma

---

在Materialize CSS文件中没有名为img-responsive的类。 - Neeraj Kumar