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/ - 请注意网站尚未完成，而且是那种只是一个实验。我目前正在研究我的实际网站。