Materialise 使滑块图像具有响应性答案

【问题标题】：Materialize making slider images responsiveMaterialise 使滑块图像具有响应性
【发布时间】：2015-08-28 10:13:31
【问题描述】：

我正在尝试使用Materialize 开发一个网站，并且网站中有一个滑块。 Materialise 反应灵敏，在各种分辨率下都能很好地工作。但是，当我减小屏幕尺寸时，滑块宽度也会减小（应该如此）。但是其中的图像只是被裁剪而不是缩放到滑块的大小。我将responsive-img 类添加到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>

【问题讨论】：

我遇到了同样的问题，我可以看到默认高度没有被正确覆盖。
我解决了我的问题，因为我在一个被溢出隐藏的更高元素上有一个轮播类。所以对我来说它现在正在工作。

标签： css image slider materialize

【解决方案1】：

尝试在你的css文件中定义

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

【讨论】：

【解决方案2】：

你应该尝试添加一个 CSS

最大宽度：100%；

到<img> 标签。希望这能解决问题。也不要忘记将responsive-img 类添加到<img>

【讨论】：

【解决方案3】：

使用带有 img 标签的 img-responsive 类。（您正在使用 responsive-img，它是一个引导类。它不适用于物化设计）

   $(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>

【讨论】：

在物化css文件中没有这样的img-responsive类。

【解决方案4】：

试试

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

【讨论】：