jQuery在Chrome中定位具有最大高度和最大宽度的图像

我刚刚注意到，在某个阶段，Chrome已经更新到一个新版本，我的一些jQuery代码不再工作。。。（jQuery 1.7版-与wordpress捆绑）

这是在幻灯片放映中定位图像（居中）和定位上一个/下一个按钮的基本代码。 它在FF中工作（不了解IE-我尽可能少地关注它）。它现在在chrome中所做的不是计算盒子的高度减去图像的高度，而是简单地将盒子的高度除以二。因此，对于一个4倍高、图像2倍高的盒子，FF给了我正确的“顶部：1倍”，而Chrome给了我“顶部：2倍”

奇怪的是，它正确地定位了#next和#prev div

h = j$('.slide').height();
w = j$('.slide').width();
nph = j$('#next').height();
j$('.slide').each(function(){
   thisImg= j$(this).find('img');
   var imgH = thisImg.height();
   var imgW = thisImg.width();
   thisImg.css({'position':'absolute',
               'top':(h-imgH)/2,
               'left':(w-imgW)/2
   } );
}) ;
j$('#next, #prev').css('top',(h-nph)/2);

})

要么我没有做正确的事情，要么chrome发生了变化（更新后我在另一个网站上丢失了完整的动画）。 如果不是我的错，Chrome有什么缺点

编辑进一步的研究使我认为这是因为我试图在一个灵活的（基于百分比的）环境中使用图像。 这意味着图像和div的样式如下：

div {height:100%;width:100%;}
img {max-height:100%;max-width:100%}

看起来Firefox可以计算，但Chrome不行。“next”（下一个）和“prev”（上一个）div具有已知的尺寸（以及正确的位置），在应用最大高度和最大宽度之前，是否有方法在加载图像时“捕获”图像并找出其尺寸

进一步更新

---

我已经设法确认，如果页面上的图像样式为“最大高度”或“最大宽度”，Chrome无法返回该图像的高度值。“outerHeight/Width”方法也不起作用。

尼克，我认为解决办法是在javascript中应用

max height

和

max Width

限制，而不是CSS，这样做的另一个好处是允许保持图像的纵横比。CSS没有此功能，因为它独立应用高度和宽度限制

可以在应用“左”和“顶”偏移的同一循环中应用限制

试试这个：

j$(function() {
    j$(".slide img").each(function(i, img) {
        var $img = j$(img),
            $wrapper = $img.closest(".slide"),//assuming '.slide' is the constraining wrapper
            w = $wrapper.width(),
            h = $wrapper.height(),
            _w = $img.width(),
            _h = $img.height(),
            scale = Math.min(1, w/_w, h/_h);//scale down if necessary, never scale up, preserving aspect ratio
        _w *= scale;
        _h *= scale;
        $img.width(_w).height(_h).css({
            'position': 'absolute',
            'left': ( w - _w ) / 2,
            'top': ( h - _h ) / 2
        });
    });
    var nph = j$('#next').height();
    j$('#next, #prev').css('top', (h-nph)/2);
});

正如评论中所指出的，我不得不假设

.slide

是约束包装器。如果没有，则调整语句

$wrapper=$img.closest（“.slide”）

中的选择器

---

不要担心

Math.min（）

，这不是一个错误。取一个最小值，应用一个最大值。

听起来像是在加载图像之前运行，因此，图像的

宽度

和

高度

信息不可用。能否在

标记中显式设置它们？是否在

$（窗口）.load（）之后运行此代码？您是否尝试过innerHeight（）、outerHeight（）等？“Chrome头痛”-这是最新版本的项目名称吗？：）请参见上面的编辑（以及标题的更改！）LOL@beetroot。请参见上面的编辑（以及标题的更改！）-问题是，如果是肖像图像，我可以获得最大高度（100%=div的高度），但在不知道初始尺寸的情况下，我无法获得宽度。CSS会覆盖HTML标记中的“宽度”和“高度”属性吗？知道标记中“style”属性中的任何内容都“胜过”样式表中的任何内容。谢谢。它可以工作！虽然我不确定缩放图像的三条魔线到底意味着什么！现在我不担心了，以后再理解吧！