如何使用通量滑块更改图像大小答案

【问题标题】：How do I Change image size using flux slider如何使用通量滑块更改图像大小
【发布时间】：2014-03-15 03:01:01
【问题描述】：

我想将flux slider 用于我正在构建的网站...一切正常，只是我无法更改图像大小...我尝试了以下 jquery

$(function(){

if(!flux.browser.supportsTransitions)
 alert("Flux Slider requires a browser that supports CSS3 transitions");

window.f = new flux.slider('#slider', {
pagination: true,
width: 300,
height: 300,
transitions: ['bars3d']

});

});

但这会将图像裁剪为我指定的缩放尺寸。
有什么解决办法吗？请帮忙。

【问题讨论】：

标签： javascript jquery html css flux

【解决方案1】：

可能存在三个问题（不确定，因为您没有添加 html/css r fiddle）；

1) 您正在调整图像容器的大小，因为您已将 height 和 width 设置为图像，例如<img src="blahblah.jgp" height="900" width="500" /> 删除 height/width 将解决此问题。

2) 其次，检查您是否有一些 css 没有让 js 覆盖，即您正在使用 !important 并在图像上应用了图像 css（高度/宽度）。

3) 最后但并非最不重要的一点，除了通过你已经在做的 js 设置图像容器height/width 之外，尝试这个，这将使图像自动适应它们的容器。

img{
    max-width: 100% !important;
    height:auto 100% !important;
    display:block 100% !important;
}

也可以尝试在你的 js 中添加 !important。希望它们中的任何一个都对您有用。

祝你好运

【讨论】：

【解决方案2】：

将高度更改为 0 并将宽度设置为负值即可。

$(function(){
    if(!flux.browser.supportsTransitions)
        alert("Flux Slider requires a browser that supports CSS3 transitions");
    window.f = new flux.slider('#slider', {
        pagination: true,
        width: -300,
        height: 0,
        transitions: ['bars3d']
    });
});

【讨论】：