I have a jcarousel slider and i am trying to fit the images to the slider on a mobile app.

This is Css code of slider.

```
.

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%;
}

```

This is the hmtl code

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

```

And this is the javascript code of slider

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

```

So now when it works like this the images does not fit on the div (wrapper).How can I set the divs up to images with jquery ?