动态调整skitter幻灯片图像大小答案

【问题标题】：Dynamically adjust skitter slideshow images size动态调整skitter幻灯片图像大小
【发布时间】：2013-03-22 17:50:04
【问题描述】：

如何通过 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>

【问题讨论】：

标签： javascript jquery html css skitter-slider

【解决方案1】：

一个简单的方法是将图像的width 更改为100%，使用css 并从.box_skitter、.container_skitter 中删除/设置width 和height

【讨论】：

【解决方案2】：

我在一个类似的项目中遇到了这个问题。我尝试在 CSS 中更改每张图片的大小（有些有效，但大多数没有）我最终将每张照片转换为 PNG 并在 Photoshop 或 Paint 中调整大小（我使用了 photoshop）。您可能知道 PNG 在调整大小时更能保持清晰度，但它确实比 JPG 占用更多空间，因此它可能不是最可取的选择，但它应该可以解决问题。

【讨论】：

【解决方案3】：

将所需样式添加到以下类解决了问题

.box_skitter img {      width: 530px ; }

【讨论】：

【解决方案4】：

你好，我做这个 hack whit css，用于制作 dinamyc 宽度 whit skitter galery；

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

我希望这对你有用:)

【讨论】：