Question

我刚刚注意到Chrome在某个阶段已更新为新版本，而且我的一些jQuery代码不再有效......（jQuery 1.7版 - 与wordpress捆绑在一起）

这是在幻灯片放映中定位图像（居中）和定位上一个/下一个按钮的基本代码。它适用于FF（不知道IE - 我尽可能少看）。它现在在chrome中的作用，而不是计算盒子的高度减去图像的高度，就是简单地将盒子高度除以2。所以，对于一个4x高的盒子，图像2x高FF给我正确的“顶部：1x”，而Chrome给我“顶部：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%}

似乎Firefox可以进行计算，但Chrome不能。 “next”和“prev”div具有已知的尺寸（并且位置正确）是否有一种方法可以在加载图像时“捕捉”图像，并在应用max-height和max-width之前找出尺寸是什么？ / p>

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

Answer 1

尼克，我认为解决方法是在javascript而不是CSS中应用max-height和max-width限制，并具有允许维护图像的宽高比的附加优势。 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()，这不是一个错误。至少应用最大值。

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

1 个答案: