Question

我正在使用jScrollPane，我在Chrome和Safari中遇到了一些可滚动区域高度的问题。

要使jScrollPane工作，我必须为可滚动区域内的任何图像设置HEIGHT和WIDTH。

.css没问题，但是如果一张图片是Ex：在肖像模式下怎么办？为了避免手动设置宽度和高度，我意识到... jQuery！：）

现在我有这样的事情：

imageWidth = $('.scroll_pane img').width();
imageHeight = $('.scroll_pane img').height();   
$('.scroll_pane img').css({'width': imageWidth, 'height': imageHeight});

这是正确的一半（我想），现在来自：

<img src="some/url/image.jpg"/>

关于DOM准备我得到了这个：

<img src="some/url/image.jpg" style="width: 120px; height: 220px"/>

第一张图片。问题是现在所有其他图像都具有相同的样式。

如何让EACH图像以自己的风格自行写入？

修改

解决方案，对于Cybernate（以及未来建议的胶囊）。

$(window).load(function () { 
    $('.scroll_pane').jScrollPane();

    $('.scroll_pane img').each(function(){    
        var $this = $(this);   
        var imageWidth = $this.width();   
        var imageHeight = $this.height();        
        $this.css({'width': imageWidth, 'height': imageHeight}); 
    }); 
});

现在正确计算图像样式，最后jScrollPane在Safari和Opera中运行！

Answer 1

使用每个功能，然后对单个元素进行操作。 e.g：

$('.scroll_pane img').each(function(){
    var $this = $(this);
    var imageWidth = $this.width(); 
    var imageHeight = $this.height();    
    $this.css({'width': imageWidth, 'height': imageHeight}); 
});

Answer 2

它不会解决您的问题，因为在触发事件时会计算width（）和height（）。如果未加载图像，则会拧紧（宽度和高度为0，或IE中的某些像素）。

您可能想要使用此方法： http://jscrollpane.kelvinluck.com/settings.html#autoReinitialise

获取图像WIDTH和HEIGHT并为任何图像写入属性

2 个答案: