Question

我一直在寻找这个问题好几个月了，从未找到解决方案，也不了解以前没人问过这个问题。
非常简单：
实体化中的全宽滑块：正在修剪滑块中的图像。如果我将窗口调整大小（放大或缩小），它将调整并以完整尺寸（不裁剪）显示给我图像。

仅查看图像的高度，它显示的是较薄的图像，而不是较大的图像，但是如果您调整窗口大小，它将自动调整：

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>

Materialize CSS全宽滑块的HEIGHT是否响应？

0 个答案: