Материализовать, делая изображения слайдера отзывчивыми

Я пытаюсь разработать веб-сайт с помощью Materialize, и на сайте есть ползунок. Materialize отзывчив и хорошо работает при различных разрешениях. Однако, когда я уменьшаю размер экрана, ширина ползунка также уменьшается (как и должно быть). Но изображение в нем просто обрезается, а не масштабируется до размера слайдера. Я добавил класс 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>

slider image css materialize
person Miral    schedule 12.06.2015    source источник
comment
Я получаю ту же проблему, я вижу, что высота по умолчанию не везде правильно переопределяется.   -  person landed    schedule 12.07.2016
comment
Я решил свою проблему, так как у меня был класс карусели на более высоком элементе, который был скрыт от переполнения. Так что для меня это работает сейчас.   -  person landed    schedule 12.07.2016

Ответы (4)


arrow_upward
4
arrow_downward

Попробуйте определить в своем файле css

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

arrow_upward
4
arrow_downward

Вы должны попробовать добавить css

максимальная ширина: 100%;

к тегу <img>. Надеюсь, это решит проблему. Также не забудьте добавить класс responsive-img к <img>

person Sanath Kumar    schedule 08.09.2015

arrow_upward
0
arrow_downward

Используйте класс img-responsive с тегом img (вы используете 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>

person Varun Sharma    schedule 30.04.2016
comment
В файле materialize css такого класса img-responsive нет. - person Neeraj Kumar; 31.07.2017

arrow_upward
0
arrow_downward

Пытаться

.slider li img{max-width:100%;height:auto;}
person Gilles Kagarama    schedule 15.10.2018