Question

我在Firefox和IE8中使用带有iframe的jQuery对话框时出现了奇怪的显示问题。

我已经在iframe之外测试了页面本身，并且只有在jQuery对话框内部才会重现问题。

问题

enter image description here

图像实际尺寸：300x225图像显示尺寸：400x300

JS代码 - 父页面

$(document).ready(function() {
    var img = $('.photoLink');
    var imgSrc = img.attr('src');
    $('.photoLink').photoDialog({
        id: imageID,
        onClose: function() {
            img.attr('src', imgSrc + '&rand=' + (new Date()).getTime());
        }
    });
});

$.fn.photoDialog = function(options) {

    var defaults = {
        autoOpen: false,
        title: 'Photo Tool',
        minHeight: 560,
        minWidth: 540
        onClose: function(){}
    };
    var opts = $.extend(defaults, options);

    return this.each(function() {
        $this = $(this);
        that =$(this);
        var $dialog = $('<div>')
            .html('<iframe src="' + opts.url + '?sn=' + opts.id + '" width="' + (opts.minWidth - 20) + '" height="' + (opts.minHeight - 20) + '" style="border: none;" scrolling="no"></iframe>')
            .dialog({
                autoOpen: opts.autoOpen,
                title: opts.title,
                minHeight: opts.minHeight,
                minWidth: opts.minWidth,
                modal: true,
                close: function() {
                    opts.onClose.call(that);
                }
            });

        $this.click(function() {
            $dialog.dialog('open');
            return false;
        });
    });
};

正文代码 - 子页面

<div id="photo_holder" runat="server">
    <asp:Image ID="image_photo" style="display: none;" runat="server" />
</div>

样式代码 - 子页面

#photo_holder { 
    position: relative; 
    float: left; 
    padding: 10px; 
    width: 300px; 
    height: 300px; 
}
.portrait { height: inherit; width: auto; }
.landscape { height: auto; width: inherit; }

JS代码 - 子页面

$(document).ready(function () {
    $('#image_photo').load(function () {
        $this = $(this);
        if ($this.width() > $this.height()) {
            $this.attr('class', 'landscape');
        }
        else {
            $this.attr('class', 'portrait');
        }

    }).fadeIn('slow');
});

图像的类别是根据图像尺寸动态设置的。

图像路径在后面的代码中设置，没有样式或调整大小。

上传时图片大小不超过300x300。

在Chrome和Safari中显示正确，但在IE和FF中出于某种原因会放大图像。

Answer 1

尝试将图像样式宽度设置为100％

Answer 2

我最终从子页面中删除了以下内容：

<强> CSS

.portrait { height: inherit; width: auto; }
.landscape { height: auto; width: inherit; }

<强> JS

$(document).ready(function () {
    $('#image_photo').load(function () {
        $this = $(this);
        if ($this.width() > $this.height()) {
            $this.attr('class', 'landscape');
        }
        else {
            $this.attr('class', 'portrait');
        }

    }).fadeIn('slow');
});

这解决了所有浏览器中的问题。最初我有更大的图像，并试图通过jQuery / CSS动态调整它们。编写服务器端代码以在上传后调整图像大小后，我不再需要此过程，但未将其从原始代码中删除。

当页面显示在jQuery Dialog和iFrame中时，图像会调整大小

2 个答案: