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

Question

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

我已经在 iframe 之外测试了页面本身，问题没有重现，只有在 jQuery 对话框内时。

问题

图片实际尺寸：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

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

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 动态调整它们的大小。在编写服务器端代码以在上传时调整图像大小后，我不再需要此过程，但没有将其从原始代码中删除。

Answer 2

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