如何使圖像適合滑塊使用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

回答

相關問題