Question

我有一个图像滑块，它没有正确显示其中的图像。不知道为什么会这样。

理想情况下，我希望图像适合容器。我试图更改内部幻灯片图像容器的高度和宽度属性，但没有运气。

此外，当我浏览滑块时，下一张图像没有显示，它显示黑色背景而不是下一张幻灯片。

这是 jsFiddle 。

         <body>
         <div class="page-wrap">

         <header class="topbar topbar-grey">
        <div class="topbar-left">
        <div class="topbar-logo">
            <a href="/">
                <img class="mysite-logo" src="http://lorempixel.com/output/cats-q-c-128-128-6.jpg" alt="Mysite Logo" />


            </a>

        </div>
    </div>
    <nav class="topbar-nav">
        <ul class="topbar-nav-main">
            <li id="home-nav"><a href="index.html">Home</a></li>
            <li id="about-nav"><a href="about.html">About</a></li>
            <li id="contact-nav"><a href="contact.html">Contact</a></li>
            <li id="gallery-nav"><a href="gallery.html">Gallery</a></li>
            <li id="comissions-nav"><a href="comissions.html">Comissions</a></li>
            </ul>
            <div class="topbar-right">
            <div class="hamburger"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
            <div class="hamburger3"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
        <div class="hamburger2"><a href="login.html">Login</div>
        </div>
        </nav>

     </header>

<div class="contentstuff">

     <div class="col col1">
     <div class="box1">
     <div id="box-image">

           </div>
           </div>
     <div class="box3">
    <div id="box-image2">

                    </div>
    </div>
   </div>

   <div class="col col2">
   <div class="box2">

    <div id="slideshow-wrap">
    <input type="radio" id="button-1" name="controls" checked="checked"/>
    <label for="button-1"></label>
    <input type="radio" id="button-2" name="controls"/>
    <label for="button-2"></label>
    <input type="radio" id="button-3" name="controls"/>
    <label for="button-3"></label>
    <input type="radio" id="button-4" name="controls"/>
    <label for="button-4"></label>
    <input type="radio" id="button-5" name="controls"/>
    <label for="button-5"></label>
    <input type="radio" id="button-6" name="controls"/>
    <label for="button-6"></label>
    <input type="radio" id="button-7" name="controls"/>
    <label for="button-7"></label>
    <input type="radio" id="button-8" name="controls"/>
    <label for="button-8"></label>
    <input type="radio" id="button-9" name="controls"/>
    <label for="button-9"></label>
    <input type="radio" id="button-10" name="controls"/>
    <label for="button-10"></label>

     <div id="slideshow-inner">
        <ul>
            <li id="slide1">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide2">

            </li>
            <li id="slide3">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide4">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide5">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide6">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide7">

            </li>
            <li id="slide8">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide9">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide10">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
        </ul>
    </div>
 </div>


  </div>
  <div class="box4">
  <div id="box-image3">

                     </div>
  </div>
  </div>


</div>

</div>





<footer class="site-footer">


 <div class="row-1">
   <div class="logofooter">
                   <a class="logofooter" href="index.html"> <img src="http://lorempixel.com/output/cats-q-c-128-128-6.jpg"></a>
                   <div class="brand">
                       <a href="index.html"> MySiteLogo</a>
                   </div>
          </div>
                 <ul class="legal">
                     <li><a href="privacy.html">Privacy Policy</a></li>
                     <li><a href="legal.html">Legal</a></li>
                     <li><a href="disclaimer.html">Disclaimer</a></li>
                     <li><a href="contact.html">Contact</a></li>
                </ul>

            <div class="social">    

                <ul class="socicons">
                    <li><a class="facebook" href="https://www.facebook.com"> <img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"></a></li>
                    <li><a class="twitter" href="https://www.twitter.com"><img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"> </a></li>
                    <li><a class="instagram" href="https://www.instagram.com"><img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"> </a></li>
                </ul>
            </div>
        </div>
            </div>

</footer>
</body>

</html>

Answer 1

嗯，在css中设置了默认的img {max-width：80％}。

#slideshow-inner>ul>li>img {
margin: auto;
height: 100%;  
width:100%;  /*set to 100%*/
} 
img {
/* max-width: 80%; */ /*Remove it, but note this will set all the images used in web page to 100%*/
max-width: 100%; /*Set to 100%*/
}

或者，

#slideshow-inner>ul>li>img {
margin: auto;
width: 100%!important;  /*this will override img{width:80%} */
}

图像滑块未显示图像的问题

1 个答案: