rightCol {

Question

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

我希望能够使用大图像（足够大的全屏版本），然后在图像上使用max-width:100%根据屏幕尺寸减小宽度。

问题是cycle.js会根据图像的大小覆盖内联样式。因此，如果它是800x600，那么它将始终以该大小显示，无论包含div的宽度是100px还是1000px

代码：

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

}

幻灯片{

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中编写一个简单的辅助函数，可以在调整窗口大小时提供此函数。用一点谷歌搜索不应该很难。

jquery cycle automatically fit to window width on resize

Jquery Cycle Resize

Answer 2

当我使用Cycle.js时，我设法为此创建了一个修复程序，但需要它才能响应。

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

e.g。

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

这里有一个例子：http://jacobhammond.co.uk/ - 请注意网站没有完成，只是一个实验。我正在开发我的实际网站。

Cycle.js覆盖图像大小

rightCol {

幻灯片{

幻灯片img {

2 个答案: