Question

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

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

这是一个说明情况的屏幕截图 illustration of situation with inspector （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);

});

Answer 1

找到它。

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

要做到这一点，我覆盖了max-width＆amp;身高高得离谱（999999999px）。看起来这个值崩溃了“webkit渲染器图像大小计算”，使图像大小保持为0 x 0.将值设置为9999px解决了问题

我不知道这是否符合webkit bug。

Answer 2

在你的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();

因为宽度和高度在对象Image中起作用，但我不确定。

使用jquery添加的图像未在webkit浏览器中显示

2 个答案: