4

我用 jquery 创建了一个图像节点，并希望将其显示为原始版本之上的更大版本。
复制的图像不会显示在 Chrome 和 Safari 中，但可以在 Internet Explorer 和 Firefox 中显示。控制台不报告错误。检查器显示具有所有正确 css 属性的克隆图像元素，但为元素提供 0 x 0 像素大小。

我没有看到任何暗示 0x0 大小的 CSS 规则。

这是说明情况的屏幕截图 检查员的情况说明 （http://i.stack.imgur.com/AhiPf.png）

这是演示行为的链接，请尝试使用 firefox 和 chrome 单击图像： download.toastlab.ch/segtest

编辑：

创建元素的 Javascript 代码：

$('.streamcontent').on('click', 'img.clickable', function () {
    var img = new Image();
    img.src = $(this).attr('src');
    var w = img.width,
        h = img.height;
    img = $(img).addClass('bigger');

    var tw = $(this).width();
    var th = $(this).height();

    var pos = $(this).position();
    var center = {
        top: pos.top + th / 2,
        left: pos.left + tw / 2
    };

    img.css({
        position: 'absolute',
        top: pos.top,
        left: pos.left,
        width: tw,
        height: th,
        opacity: 0
    }).animate({
        top: center.top - h / 2,
        left: center.left - w / 2,
        height: h,
        width: w,
        opacity: 1
    }, 300, function () {
        $('body').one('click', function () {
            img.animate({
                top: pos.top,
                left: pos.left,
                width: tw,
                height: th,
                opacity: 0
            }, function () {
                img.remove();
            });
        });
    });
    $(this).parent().append(img);

});
4

2 回答 2

2

找到了。

有一个 CSS 规则指定了最大尺寸（使用max-widthand max-height），我需要覆盖该规则以允许更大的图像......更大。

为此，我用一个高得离谱的值（999999999px）覆盖了最大宽度和高度。似乎该值使“webkit 渲染器图像大小计算”崩溃，使图像大小为 0 x 0。将值设置为 9999px 解决了问题

我不知道这是否符合 webkit 错误。

于 2012-08-30T16:18:31.273 回答
0

在你的 JS 代码中

$('.streamcontent').on('click', 'img.clickable', function() {
    var img = new Image();
    img.src = $(this).attr('src');
    var w = img.width, h = img.height;
    img = $(img).addClass('bigger');
    ...

我认为你必须改变

var w = img.width, h = img.height;

经过

var w = img.width(), h = img.height();

因为宽度和高度是对象图像中的函数，但我不确定。

于 2012-08-30T16:11:30.853 回答