0

我的网页上有一个 Jquery 滑块。现在滑块中的图像是 1024x500px。现在我使用@media 查询指定，每当视口大小低于 1024 像素宽度时，图像（以及整个滑块元素）都应该使用指定的窗口大小调整大小，如下所示：（注意 sliderContainer 只是一个示例名称）

.sliderContainer{
    max-width: 100%;
    height: auto;
    width: auto; /* for ie9 */ 
}

现在调整图像的大小效果很好，但只有在不包含 jquery 滑块源文件的情况下，所以在 jquery 文件的某处有宽度和高度计算器会弄乱调整大小，我相信这是这部分：

_setImagesSize      : function() {

            // save ei-slider's width
            this.elWidth    = this.$el.width();

            var _self   = this;

            this.$images.each( function( i ) {

                var $img    = $(this);
                    imgDim  = _self._getImageDim( $img.attr('src') );

                $img.css({
                    width       : imgDim.width,
                    height      : imgDim.height,
                    marginLeft  : imgDim.left,
                    marginTop   : imgDim.top
                });

            });

        },

Jquery 文件： http: //lamininbeauty.co.za/js/jquery.eislideshow.js

现在这里是我的网页示例，因此您可以看到它的作用。将窗口大小调整到 1024 像素以下以了解我的意思：我的页面 注意：每当我删除 jquery 部分时，图像的大小调整工作在 1024 像素以下，并且图像会随着浏览器窗口调整大小。

现在这里是功能基本标记：

HTML：

<div id="ei-slider" class="ei-slider">
                <ul class="ei-slider-large">
                <li>
                    <img src="images/large/sunbed.jpg" alt="Vertical Sunbed TanCan"/>
                    <div class="ei-title">                  
                        <h2>Vertical Sunbed</h2>
                        <h3>(TanCan)</h3>             
                    </div>
                </li>
                <li>
                    <img src="images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
                    <div class="ei-title">                  
                        <h2>Vertical Sunbed</h2>
                        <h3>(TanCan)</h3>             
                    </div>
                </li>
                <li>
                    <img src="images/large/sunbed.jpg" alt="Vertical Sunbed TanCan"/>
                    <div class="ei-title">                  
                        <h2>Vertical Sunbed</h2>
                        <h3>(TanCan)</h3>             
                    </div>
                </li>
                <li>
                    <img src="images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
                    <div class="ei-title">                  
                        <h2>Vertical Sunbed</h2>
                        <h3>(TanCan)</h3>             
                    </div>
                </li>
                <li>
                    <img src="images/large/sunbed.jpg" alt="Vertical Sunbed TanCan"/>
                    <div class="ei-title">                  
                        <h2>Vertical Sunbed</h2>
                        <h3>(TanCan)</h3>             
                    </div>
                </li>
                <li>
                    <img src="images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
                    <div class="ei-title">                  
                        <h2>Vertical Sunbed</h2>
                        <h3>(TanCan)</h3>             
                    </div>
                </li>
                <li>
                    <img src="images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
                    <div class="ei-title">                  
                        <h2>Vertical Sunbed</h2>
                        <h3>(TanCan)</h3>             
                    </div>
                </li>
                </ul>
</div>

CSS：

.ei-slider{
    position: relative;
    width: 1024px;
    height: 500px;
    margin: 0 auto;
}
.ei-slider-large{
    height: 100%;
    width: 100%;
    position:relative;
    overflow: hidden;
}
.ei-slider-large li{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.ei-slider-large li img{
    width: 100%;
}

/*The part that governs the resizing below 1024px*/

@media screen and (max-width: 1023px){           
    .ei-slider{
        position: relative;
        max-width: 100%;
        height: auto;
        width: auto; /* for ie9 */
    }   
    .ei-slider-large{
        position: relative;
        max-width: 100%;
        height: auto;
        width: auto; /* for ie9 */
    }
    .ei-slider-large li{
        position: static;
        top: 0px;
        left: 0px;
        overflow: hidden;
        height: 100%;
        width: 100%;
}
    .ei-slider-large li img{
        max-width: 100%;
        height: auto;
        width: auto; /* for ie9 */

    }
}

我怎样才能解决这个问题？

谢谢你！

4

0 回答 0