Asp.net 当页面显示在jQuery对话框和iFrame内部时，图像大小已调整

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

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

问题

$(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; }

$(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');
});

图像实际尺寸：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; }

$(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');
});

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; }

$(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中，由于某些原因，它会放大图像。

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

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

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

CSS

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

$(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');
});

JS

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

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

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

CSS

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

$(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');
});

JS

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

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

我无法更改照片的大小，因为它将被裁剪，我需要基于实际图像大小的正确裁剪X、Y坐标。横向和纵向CSS用于根据尺寸动态对齐照片。此外，样式信息也在子页面中，子页面本身呈现良好效果。问题是使用jQuery对话框在iframe中启动时。我无法更改照片的大小，因为它将被裁剪，我需要基于实际图像大小的正确的裁剪X、Y坐标。横向和纵向CSS用于根据尺寸动态对齐照片。此外，样式信息也在子页面中，子页面本身呈现良好效果。问题在于使用jQuery对话框在iframe中启动时。