Responsive design Cycle.js覆盖图像大小

我正在使用cycle.js，但该网站是响应性的

我希望能够使用一个大图像（足够大的全屏版本），然后在图像上使用

max width:100%

，根据屏幕大小缩小其宽度

问题是，

cycle.js

根据图像的大小使用内联样式覆盖。因此，如果它是

800x600

，则无论包含div的宽度是100px还是1000px，它都将始终以该大小显示

代码：

}

幻灯片放映{ }

幻灯片式img{

---

}

看看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);

它需要获得图像元素的height-width属性。因此，在JS中编写一个简单的helper函数，它可以在调整窗口大小时提供此功能。谷歌搜索应该不会太难

---

当我使用Cycle.js时，我成功地创建了一个修复程序，但需要它具有响应性

我必须在其他图像之前添加一个具有固定宽度和高度的透明dummy.gif图像

e、 g

这里有一个例子：-请注意网站还没有完成，只是一个实验。我目前正在我的实际网站上工作

width:72.5%;
float:right;

width:100%

max-width:100%;

// 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);

<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>

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