Question

我正在尝试使用Materialize开发一个网站，网站上有一个滑块。 Materialise具有响应性，并且在各种分辨率下都能正常运但是，当我减小屏幕尺寸时，滑块宽度也会减小（应该如此）。但是它中的图像只是被裁剪而不是缩放到滑块的大小。我将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>

Answer 1

尝试在css文件中定义

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

Answer 2

你应该尝试添加一个CSS

最大宽度：100％;

到playLvlAgn.addEventListener(MouseEvent.CLICK, doLevelAgain); function doLevelAgain(event: MouseEvent): void { gotoAndStop(2); for (var i: int = 0; i < 3; i++) { if (balls.length > 0) { ball = balls.pop(); ball.parent.removeChild(ball); trace("if--0c") } } if (stage.contains(playLvlAgn)) { removeChild(playLvlAgn); trace("if--1") } if (stage.contains(yesh8DoorA)) { removeChild(yesh8DoorA); trace("if--2") } if (stage.contains(yesh8DoorB)) { removeChild(yesh8DoorB); trace("if--3") } if (stage.contains(yesh8DoorC)) { removeChild(yesh8DoorC); trace("if--4") } if (stage.contains(yesh8allBuckets1)) { removeChild(yesh8allBuckets1); trace("if--5") } if (stage.contains(yesh8allBuckets2)) { removeChild(yesh8allBuckets2); trace("if--6") } if (stage.contains(add8bigGrayBall6)) { removeChild(add8bigGrayBall6); trace("if--7") } if (stage.contains(yesh8wall5)) { removeChild(yesh8wall5); trace("if--8") } if (stage.contains(yesh8step)) { removeChild(yesh8step); trace("if--9") } if (stage.contains(yesh8bomb26)) { removeChild(yesh8bomb26); trace("if--10") } if (stage.contains(yesh8bomb27)) { removeChild(yesh8bomb27); trace("if--10") } if (stage.contains(yesh8bomb28)) { removeChild(yesh8bomb28); trace("if--10") } if (stage.contains(yesh8bomb2)) { removeChild(yesh8bomb2); trace("if--11") } if (stage.contains(yesh8bomb3)) { removeChild(yesh8bomb3); trace("if--12") } if (stage.contains(yesh8gBall21)) { removeChild(yesh8gBall21); trace("if--13") } if (stage.contains(yesh8gBall24)) { removeChild(yesh8gBall24); trace("if--14") } if (stage.contains(yesh8redHalfSwing)) { removeChild(yesh8redHalfSwing); trace("if--15") } gotoAndPlay(1); }标记。希望这能解决问题。另外，请不要忘记将<img>课程添加到responsive-img

Answer 3

使用带有img标签的img-responsive类。（你使用的是响应式img，它是一个bootstrap类。它不适用于物化设计）

＆＃13;

   $(document).ready(function () {
       $('.slider').slider({full_width: true});
   });

＆＃13;

 <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>

＆＃13;

Answer 4

尝试

.slider li img{max-width:100%;height:auto;}

实现滑块图像的响应

4 个答案: