How to fit images to a slider with jquery

Question

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 ?

Answer 1

I solved it with getting device's width like this

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

    });

Answer 2

By the way I dont know the images size so i have to learn image's size first and have to fit them to the div which program creates dynamically.

Answer 3

See the Below Snippet You will get the idea that how to fit image inside the parent 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>