0

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

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

似乎 Firefox 可以进行计算，但 Chrome 不能。“下一个”和“上一个” div 具有已知尺寸（并且位置正确） 有没有办法在加载图像时“捕捉”图像并在应用 max-height 和 max-width 之前找出它的尺寸？

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

4

1 回答 1

0

Nick，我认为解决方法是在 javascript 而不是 CSS 中应用max-heightandmax-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()，这不是一个错误。取最小值，应用最大值。

于 2012-08-10T04:32:46.083 回答