动态调整滑行幻灯片图像大小

时间:2013-03-22 17:50:05

标签: javascript jquery html css3 skitter-slider

如何将幻灯片图像调整大小(缩放)到jquery或css或其他任何方式的不同大小?

它总是加载主图像的全宽和高度,并用以下方式控制不起作用。

您可以下载sample full working skitter sample并自行轻松测试

http://www.skitter-slider.net/documentation

中找不到任何帮助

可以通过以下示例代码调整图像滑块容器的大小,但如果图像大于530像素,则只会显示其中的一部分。

$(document).ready(function() {
           $('.box_skitter_large').css({width: 530, height: 110}).skitter({
                theme: 'minimalist',numbers_align: 'center'                 
            });    
        });
    </script>

在img标签中设置图像宽度和高度也无济于事。

以下是原始问题中可能有所帮助的更具体的情况。

我编写了以下代码,使用skitter和jquery在窗口调整大小时动态调整图像大小。但它没有工作请帮助

<script>
$('.box_skitter_normal').addClass("z1").skitter({label: false, numbers: false});
            $('.box_skitter_normal2').addClass("z2").skitter({label: false, numbers: false});

$(window).resize(function() {
   $('.box_skitter_normal').addClass("z1").skitter({label: false, numbers: false});
            $('.box_skitter_normal2').addClass("z2").skitter({label: false, numbers: false});
});
</script>

4 个答案:

答案 0 :(得分:3)

很容易使用css将图片的width更改为100%并从width移除/设置height.box_skitter,{ {1}}

答案 1 :(得分:3)

我在类似的项目中遇到过这个问题。我尝试改变CSS中的每个单独的图片大小(有些工作,但大多数没有)我最后做的是将每张照片转换为PNG并在Photoshop或Paint(我使用photoshop)中调整大小。你可能知道PNG在调整大小时保持清晰度更好,但它确实占用了比JPG更多的空间,所以它可能不是最好的选择,但它应该完成这个技巧。

答案 2 :(得分:2)

将所需的样式添加到后续类中解决了问题

.box_skitter img {      width: 530px ; }

答案 3 :(得分:0)

你好我做这个hack whit css,用于制作dinamyc宽度丝毫滑行galery;

&#13;
&#13;
.container_skitter{
    width: 100%!important;
    height: 100%!important;
}
.image_main{
    width: 100%!important;
    height: 100%!important;
}
.box_skitter_large {
    max-width: 408px !important;
    max-height: 275px !important;
}
.box_clone{    width: 100%!important;
    height: 100%!important;}
.cube{width:100% !important;}
&#13;
&#13;
&#13;

我希望这适合你:)