如何使用 jquery 使图像适合滑块

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。

Answer 2

查看下面的代码片段，您将了解如何将图像放入父级 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 3

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

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

    });

如何使用 jquery 使图像适合滑块

How to fit images to a slider with jquery

jquery

html

jcarousel