jQuery在Chrome中头痛地定位图片的最大高度和最大宽度

我刚刚注意到，在某个阶段，Chrome已经更新到新版本，我的一些jQuery代码不再适用...（jQuery版本1.7 - 与wordpress捆绑）jQuery在Chrome中头痛地定位图片的最大高度和最大宽度

这是用于在幻灯片放映中定位图像（居中）并定位上一个/下一个按钮的基本代码。它在FF中工作（不知道IE浏览器 - 我尽量少看）。它现在在铬版中所做的，而不是计算盒子的高度减去图像的高度，而是将盒子高度简单地除以2。所以，对于一个4x高的图像，带有2x高的图像的盒子给了我正确的“top：1x”，Chrome给了我“top：2x”。

奇怪的是它正确地定位#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%}

看来，火狐可以进行计算，而Chrome则不能。 “next”和“prev”div具有已知的尺寸（以及正确的位置）在装入max-height和max-width之前，是否有一种方法可以“捕捉”图像并找出它的尺寸？

进一步更新我已经设法确认，如果Chrome的样式为“max-height”或“max-width”，Chrome无法返回页面上图片高度的值。 “outerHeight/Width”方法也不起作用。

来源

2012-08-08 Nick

听起来像在图像加载之前运行的，因此它们的“宽度”和“高度”信息不可用。你能够明确地在''标签中设置它们吗？ – ahren 2012-08-08 23:57:04

你在'$（window）.load（）'后运行这段代码吗？你有没有尝试过innerHeight（），outerHeight（）等？ – 2012-08-08 23:58:47

“Chrome头痛” - 是最新发布的项目名称？ :) – 2012-08-09 00:03:01

尼克，我认为解决方法是在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); 
});

正如评论所指出的，我必须假设是约束包装。如果不是，则在语句$wrapper = $img.closest(".slide")中调整选择器。

不要担心Math.min()，这不是一个错误。最低，最高适用。

来源

2012-08-10 04:32:46

Thanks.It工程！虽然我不确定这三个缩放图像的魔术线究竟意味着什么！现在我不会担心，理解它是为了以后！ – Nick 2012-08-10 06:02:16

jQuery在Chrome中头痛地定位图片的最大高度和最大宽度

回答

相关问题