css - 实现使滑块图像响应

Question

我正在尝试使用Materialise开发一个网站，并且网站中有一个滑块。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>

Answer 1

你应该尝试添加一个CSS

最大宽度：100%；

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

Answer 2

尝试在你的css文件中定义

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

Answer 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>

Answer 4

尝试

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