图像在safari和chrome中缩放但不在ff和opera中

我使用的图像滑块称为jb gallery 3.0 - 使用jQuery运行。图像在safari和chrome中缩放但不在ff和opera中

这只是一个普通的图像滑块，但它具有检测浏览器大小，然后将图像缩放到浏览器大小的功能，即。如果你在iPad上观看，它会给你一个更小的图像，这样你仍然可以看到整个图像。

调整大小是每次图像加载到滑块时完成的，所以如果您调整幻灯片之间的窗口大小，下次加载图像时将缩放...无需刷新页面。

这一切工作正常但Safari和Chrome，但在Firefox和Opera（12.14），它不，它只是提供了全尺寸的图像裁剪...

我做的什么是爵士小提琴在这里发生 - http://jsfiddle.net/ktvvW/5/ - 尝试在Chrome或Safari浏览器中调整“结果”面板的大小以查看将要发生的情况。

任何想法，为什么这不适用于ff或歌剧？

干杯

来源

2013-02-25 sam

不为FF调整大小。 – isherwood 2013-02-25 15:39:14

@isherwood，多数民众赞成在问题它不工作在ff – sam 2013-02-25 17:28:31

道歉。我误读了。不幸的是，我目前的SO时间有限，我无法提供帮助。 – isherwood 2013-02-25 17:32:18

强制jbgallery-3.0.js脚本上的webkit行为似乎解决了这个问题。请参阅下面的选项，我强制webkit为true（忽略userAgent）。我已经在FF和Opera上测试过这个功能，并且功能与预期的一样，图像以与Chrome相同的缩放比例显示。

$(".jbgallery").jbgallery({ 
    style : "zoom",  //"centered"|"zoom"|"original" - image style 
    menu  : "simple",   //false|"numbers"|"simple"|"slider" - menu type 
    shortcuts: [37, 39],   //[prev,next] - keyboard code shortcuts 
    slideshow: true,   //true|false - autostart slideshow 
    fade  : true,    //true|false - disable all fade effects 
    popup : false,   //true|false - modal box & traditional popup hack to display multiple gallery (3.0 : fullscreen:false) 
    randomize: 0,    //0|1|2 - randomize first image (1) or randomize "slideshow" (2) - blackout: http://www.grayhats.org 
    caption : false,    //true|false - show/disable internal caption system 
    autohide : false,   //true|false - auto hide menu & caption 
    clickable: false,   //true|false - "image click & go" 
    current : 1,    //number  - set initial photo (modal "hack" - see demo. don't use "hash". jbgallery use "location.hash" only in popup mode) 
// webkit : (navigator.userAgent.toLowerCase().search(/webkit/) != -1), //boolean - used for specific browser hack. if you want, you can force disable this flag & try to find crossbrowser solution 
    webkit : true, 
    ie6  : (/MSIE 6/i.test(navigator.userAgent)), //boolean - IDEM 
    ie7  : (/MSIE 7/i.test(navigator.userAgent)), //boolean - IDEM 
    labels : {     //labels of internal menu 
     play : "play", 
     next : "next", 
     prev : "prev", 
     stop : "stop", 
     close: "close", 
     info : "info" 
    }, 
    timers : {     //timers 
     fade : 1000,   //fade duration 
     interval: 3000,   //slideshow interval 
     autohide: 7000   //autohide timeout 
    }, 
    delays: {     //delays (timers) to improve usability and reduce events 
     mousemove: 200,   //used by autohide. cancel autohide timeout every XXXms. 
     resize : 10,   //used by ie6 to reduce events handled by window.resize 
     mouseover: 800   //used by tooltip. show tooltip only if the mouse STAY over thumb for XXXms 
    }, 
    close : function(){},  //callback handled by menu's button close. see demo. example : close : function(){window.close()} 
    before : function(){},  //callback handled BEFORE image gallery loaded 
    after : function(ev){}, //callback(ev) handled AFTER image gallery loaded. receive the native load event. 
    load  : function(ev){}, //callback(ev) handled AFTER native image load event. receive the native load event. 
    ready : function(el){$('.jbg-menu').hide(); $('.jbg-loading').remove(); $('.jbg-caption').remove(); $('.jbg-menu-opacity').remove();}, //callback(el) handled AFTER jbgallery render. receive the HTML element. 
    fullscreen: false,   //true|false : the most important feature of jbgallery 3.0. now jbgallery can "stay in a box" and have multiple istance in one page. 
    push  : function(o){}, //callback handled by push public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external. useful for external menu system 
    unshift : function(o){}, //callback handled by unshift public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external. 
    shift  : function(){}, //callback handled by shift public method 
    pop  : function(){}, //callback handled by pop public method 
    empty  : function(){}  //callback handled by empty public method 
});

这里的link to my jsfiddle

来源

2013-02-28 10:15:47 marty

似乎是这是一个问题的CSS。

原

.jbgallery .jbgallery-target.zoom { 
    min-height: 50%; 
    min-width: 50%; 
}

修改

.jbgallery .jbgallery-target.zoom { 
    height: 50%; 
    width: 50%; 
}

错误不得不添加的CSS在CSS面板原来是在插件中的CSS

这里是一个链接的新csshttp://jsfiddle.net/ktvvW/8/

来源

2013-02-25 22:01:12

谢谢，但是改变CSS以延伸并扭曲图像的比例以使其适合浏览器窗口。与在铬和Safari浏览器中的原始图片一样，它使用图片缩放和裁剪的混合来不断填充浏览器窗口。 – sam 2013-02-26 10:55:57

我想我知道如何做到这一点：

改变负载功能象下面这样：

load  : function(ev){$(".zoom").css("width",$("#slider").width()),$(".zoom").css("height","auto");$(".zoom").css("left","0px");$(".zoom").css("top","auto")},

它会在所有的浏览器，测试，成功工作

来源

2013-02-28 19:38:05 MIIB

我还没有完整的答案，但我h在过去也有类似的问题。我了解到Gecko（Firefox）和Webkit（Safari和Chrome）不能以相同的方式处理图像。当我试图缩放图像时，图像大小的信息不可用，因此无法使用相同的代码对它们进行缩放。

我只能建议对image + onload事件做一些研究。这在我看来是一个javascript问题。

来源

2013-03-06 00:54:42 Bertrand

图像在safari和chrome中缩放但不在ff和opera中

回答

相关问题