Является ли ползунок Materialize CSS полной высоты отзывчивым? - PullRequest
Новая
       31

Является ли ползунок Materialize CSS полной высоты отзывчивым?

1 голос
/ 13 марта 2019

Я искал эту проблему в течение нескольких месяцев, никогда не находя решения и не понимая, почему никто никогда не спрашивал ее раньше.
Все довольно просто:
Ползунок полной ширины в Materialise: изображения в ползунке обрезаются. Если я изменю размер окна (до большего или меньшего размера), оно будет корректироваться и показывать мне изображения в полном размере (не обрезанные).

Просто посмотрите на высоту изображения, оно показывает тонкое изображение вместо большего, но если вы измените размер окна, оно автоматически настроится:

https://codepen.io/anon/pen/drJWxG

С наилучшими пожеланиями и заранее спасибо !!!!!!!!!!!!!

Мой код: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Slyder</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/materialize.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
  <style>
    h1{padding:10px auto, color:#fff}

    .carousel .carousel-item > img {max-width:100%;height:auto;}
  </style>
</head>
<body>
   <div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/800/400/food/1" class="responsive-img"></a>
    <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/800/400/food/2" class="responsive-img"></a>
    <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/800/400/food/3" class="responsive-img"></a>
    <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/800/400/food/4" class="responsive-img"></a>
  </div>
    <div class="row">
      <div class="col l12 red">
        <h1>Please resize window to see the slider's height change</h1>
      </div>
    </div>

  <script type="text/javascript">
      $(document).ready(function(){
     $('.carousel.carousel-slider').carousel({fullWidth: true});

    });

  </script>
</body>
</html>
...