Question

我有一个jcarousel滑块，我正在尝试将图像放到移动应用程序的滑块上。

这是滑块的Css代码。

.

jcarousel-wrapper {

    padding:auto;
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
}


.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

.jcarousel-wrapper .photo-credits a {
    color: #fff;
}

.jcarousel {
    position: relative;
    overflow: hidden;
}

.jcarousel ul {
    width: 2000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}

.jcarousel li img {

    max-width: 100%;
    max-height: 100%;
}

这是hmtl代码

<!-- Wrapper -->
<div class="jcarousel-wrapper">
    <div class="jcarousel">
        <ul>
            <li><a href="linkxxxx"><img src="../www/img/banner-home1.jpg" alt=""></a></li>
            <li><a href="linkxxxx"><img src="../www/img/banner-home2.jpg" alt=""></a></li>
            <li><a href="linkxxxx"><img src="../www/img/banner-home3.jpg" alt=""></a></li>
            <li><a href="linkxxxx"><img src="../www/img/banner-home4.jpg" alt=""></a></li>
        </ul>
    </div>
</div>

这是滑块的javascript代码

(function() {
      $('.jcarousel')
      .jcarousel({
                 wrap: 'circular'
                 })
      .jcarouselAutoscroll({
                           interval: 4000,
                           target: '+=1',
                           autostart: true
                           });
      });

所以现在当它像这样工作时，图像不适合div（包装器）。如何将div设置为带有jquery的图像？

Answer 1

请参阅下面的代码片段您将了解如何将图像放入父div中。

img{
  max-width:100%;
  width:auto;
}

<div class="parent">
  <img src='http://www.fitzmuseum.cam.ac.uk/sites/default/files/1_0.jpg'>
</div>

Answer 2

顺便说一下，我不知道图像的大小，所以我必须首先学习图像的大小，并且必须使它们适合程序动态创建的div。

Answer 3

我通过获取设备的宽度来解决这个问题

$(document).ready(function() {
                      var divWidth = $(window).width();
                      $('.jcarousel img').css('width', divWidth+'px');

    });

如何使用jquery

3 个答案: