1

CSS を使用してマテリアライズ スライダーをレスポンシブにしようとしていますが、正しく動作しません。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 に答える