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

我有一个jcarousel滑块，我试图将图像适配到滑块上的移动应用程序。如何使图像适合滑块使用jQuery

这是滑块的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的图像？

来源

2017-08-29 Süleyman GÜNDÜZ

顺便解决了这个问题，我不知道图像尺寸，所以我要学习图像的大小第一，并有适合他们到程序动态创建的div。 –

-1

我得到设备的宽度这样

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

    });

来源

2017-08-29 11:26:08

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

来源

2017-08-29 11:00:56

查看下面的代码你会得到这样的想法，如何适应父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>

来源

2017-08-29 11:09:31

我试过了，但我没有工作 –

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

回答

相关问题