1

我正在尝试使用 CSS 使 Materialize 滑块响应，但它不能正常工作。当我使用 Firefox 的自适应视图测试我的代码时，我得到的滑块图像响应的灰色背景比滑块图像的高度大得多（如下所示）。

   .slider .slides li img {

background-size: 100% auto;;
background-repeat: no-repeat;
}
<div class="row">
<div class="slider " >
  <ul class="slides ">
                <li>
      <img class="responsive-img" id="img" src="{{ asset('font/images/IMG_61.jpg') }}"> 
    </li>
      <li>
      <img class="responsive-img" id="img" src="{{ asset('font/images/IMG_53.jpg') }}"> 
    </li>
    <li>
      <img class="responsive-img" id="img" src="{{ asset('font/images/IMG_2.jpg') }}"> 
    </li>
  </ul>
</div>
</div>

屏幕截图尺寸 360×640

4

3 回答 3

2

试试这个，对我有用

 .slider .slides {
    background-color: transparent;
    margin: 0;
    height: 400px;
}

.slider .slides li img {
    height: 100%;
    width: 100%;
    background-position: center;
    background-size:100% auto;
    background-repeat: no-repeat;
}
于 2016-02-29T19:16:26.123 回答
0

这是对我有用的解决方案：手动将滑块的高度分配为中小型设备的 250px 和大型设备的 600px 滑块高度（宽度超过 600px 的设备）

 @media only screen and (max-width: 600px) {
          .slides {
            height: 250px !important;
          }
            .slider {
                 height: 250px !important;
            }
        }

@media only screen and (min-width: 600px) {
          .slides {
            height: 600px !important;
          }
            .slider {
                 height: 600px !important;
            }
        }
于 2020-02-17T10:35:31.420 回答
0

您确实添加了：

.fullscreen

到滑块，这可以工作，如文档中所示。耐心阅读人，这就是它所需要的:)

https://materializecss.com/fullscreen-slider-demo.html

Codepen 显示标记和初始化：

https://codepen.io/doughballs/pen/YzXqdPO

<div class="slider fullscreen">
  <ul class="slides">
    <li class="active" style="opacity: 1; transform: translateX(0px) translateY(0px);">
      <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url(&quot;https://images.unsplash.com/photo-1464817739973-0128fe77aaa1?dpr=1&amp;auto=compress,format&amp;fit=crop&amp;w=1199&amp;h=799&amp;q=80&amp;cs=tinysrgb&amp;crop=&quot;);"> <!-- random image -->
      <div class="caption center-align" style="opacity: 1; transform: translateX(0px) translateY(0px);">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li class="" style="opacity: 0; transform: translateX(0px) translateY(0px);">
      <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url(&quot;https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&amp;fm=jpg&amp;s=0e993004a2f3704e8f2ad5469315ccb7&quot;);"> <!-- random image -->
      <div class="caption left-align" style="opacity: 0; transform: translateX(-100px);">
        <h3>Left Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li class="" style="opacity: 0; transform: translateX(0px) translateY(0px);">
      <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url(&quot;https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&amp;fm=jpg&amp;s=6a4fc66161293fc4a43a6ca6f073d1c5&quot;);"> <!-- random image -->
      <div class="caption right-align" style="opacity: 0; transform: translateX(100px);">
        <h3>Right Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
  </ul>
<ul class="indicators"><li class="indicator-item active"></li><li class="indicator-item"></li><li class="indicator-item"></li></ul></div>
于 2020-02-17T12:05:30.350 回答