Cycle.js覆蓋圖像大小

Question

我正在使用cycle.js，但該網站是響應式的。

我希望能夠使用大圖像（足夠大的全屏版本），然後在圖像上使用max-width:100%以根據屏幕大小減小寬度。

問題是cycle.js會根據圖像的大小重寫內聯樣式。因此，如果它是800x600則總是在該大小顯示，而不管包含div的寬度是否是100像素或1000像素

代碼：

<div id="rightCol"> 
      <div class="slideshow"> 
       <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" /> 
       <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" /> 
       <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" /> 
       <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" /> 
      </div> 
     </div> 

rightCol {

width:72.5%; 
float:right; 

}

slideshow {

width:100% 

}

幻燈片IMG {

max-width:100%; 

}

Answer 1

看一看cycle.js

// apparently a lot of people use image slideshows without height/width attributes on the images. 
// Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that. 
var requeue = false; 
options.requeueAttempts = options.requeueAttempts || 0; 
$slides.each(function() { 
    // try to get height/width of each slide 
    var $el = $(this); 
    this.cycleH = (opts.fit && opts.height) ? opts.height : ($el.height() || this.offsetHeight || this.height || $el.attr('height') || 0); 
    this.cycleW = (opts.fit && opts.width) ? opts.width : ($el.width() || this.offsetWidth || this.width || $el.attr('width') || 0); 

    if ($el.is('img')) { 
     // sigh.. sniffing, hacking, shrugging... this crappy hack tries to account for what browsers do when 
     // an image is being downloaded and the markup did not include sizing info (height/width attributes); 
     // there seems to be some "default" sizes used in this situation 
     var loadingIE = ($.browser.msie && this.cycleW == 28 && this.cycleH == 30 && !this.complete); 
     var loadingFF = ($.browser.mozilla && this.cycleW == 34 && this.cycleH == 19 && !this.complete); 
     var loadingOp = ($.browser.opera && ((this.cycleW == 42 && this.cycleH == 19) || (this.cycleW == 37 && this.cycleH == 17)) && !this.complete); 

它需要得到高度寬度屬性的內部工作圖像元素。因此，在JS中編寫一個簡單的幫助函數，可以在調整窗口大小時提供此功能。用一點Google搜索就不應該很難。

jquery cycle automatically fit to window width on resize

Jquery Cycle Resize

Answer 2

我設法創建此修復程序，當我用Cycle.js但需要它來響應。

我必須在其他圖像之前添加一個具有固定寬度和高度的透明dummy.gif圖像。

例如

<div id="slider-wrapper"> 

    <div id="slider"> 

     <img src="images/dummy.gif" width="960px" height="300px"> 

     <img src="images/image1.jpg" /> 

     <img src="images/image2.jpg" /> 

     <img src="images/image3.jpg" /> 

     <img src="images/image4.jpg" /> 

    </div> 
</div> 

CSS的去用它爲：

#slider 
{ 
    width:100%; 
    height:auto; 
    min-height:300px; 
    max-width:960px; 
} 
#slider img 
{ 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 

這裏有一個例子：http://jacobhammond.co.uk/ - 請注意網站尚未完成，而且是那種只是一個實驗。我目前正在研究我的實際網站。