调整大小时保持 .ui-dialog-content 的纵横比答案

【问题标题】：keep aspect ratio of .ui-dialog-content when resizing调整大小时保持 .ui-dialog-content 的纵横比
【发布时间】：2015-08-19 15:47:17
【问题描述】：

我在对话框中有一张图片。当我调整对话框的大小时，aspectRation 正在整个对话框上工作，而不仅仅是在图像上，当我调整它的大小时。

$("#videoDialog").dialog({
            resizable: false,
            autoOpen: true,
            width: 300
        }).parent().resizable({
            aspectRatio: true,
            minWidth: 300
        });

我调整对话框的大小越多，图像底部和对话框底部之间的空间就越大。

这是一个小提琴： https://jsfiddle.net/0fnbnw4L/1/

有什么办法解决这个问题吗？

谢谢阿德里安

【问题讨论】：

标签： jquery jquery-ui dialog aspect-ratio jquery-ui-resizable

【解决方案1】：

$('#dj-manipulator').resizable({ 遏制：'父母'，纵横比：真，最大宽度：96，最大高度：72，调整大小：函数（evt，ui）{ ui.element.parent().css({width:'',height:''}); } });

这解决了我的问题:)

【讨论】：

【解决方案2】：

这是因为您正在调整整个对话框的大小（并保持其纵横比）。

如果您删除该.parent() 调用，您将仅调整对话窗口内容的大小。但是，对话窗口不会随内容调整大小，对吧？因此，每次调整内容大小时都必须重新设置其大小。

这是最终代码：

$(document).ready(function(e) {
    $("#slideDialog").dialog({
        resizable: false,
        autoOpen: true,
        width: 100
    }).resizable({
        aspectRatio: true,
        minWidth: 100,
        resize: function (evt, ui) {
            ui.element.parent().css({width:'',height:''});
        }
    });
});

工作示例：https://jsfiddle.net/0fnbnw4L/4/

【讨论】：

谢谢。这主要解决了我的问题。我为可调整大小添加了更多句柄。现在，如果我向左调整大小，盒子就会坏掉。见小提琴jsfiddle.net/0fnbnw4L/5
似乎没有人可以帮助我解决我关于 qjeury-ui 对话框的其他主题，而且你似乎对这个东西很强大。你觉得可以看看@stackoverflow.com/questions/30652209/…吗？ :-)

【解决方案3】：

在图像和尺寸方面 - 您必须做出一些选择。

通常，您要么保持 aspectRatio 和 clip（切断溢出），要么调整 aspectRatio（更改尺寸以挤压图像）并确保显示整个图像而不进行剪辑。

根据您的特定应用程序，每个都有优点和缺点，这里 - 外部对话框窗口无法“调整大小”，但您在父级上保持 aspectRatio，这意味着它将使用图像....它并没有真正在图像下方添加更多空间或缩放空间 - 它正在缩放窗口以适应图像的宽度，这会导致图像下方出现额外的负空间。

看看这个小提琴：https://jsfiddle.net/0fnbnw4L/2/

 $("#slideDialog").dialog({
            resizable: true,
            autoOpen: true,
            width: 100
        }).parent().resizable({
            aspectRatio: true,
            minWidth: 100
     });

在这里，我错误地确保图像尽可能地填充窗口，它可以使用 100% 的窗口宽度和尽可能多的（同时保持 A.R.）高度。如果高度小于 aspectRatio 允许仍使用全宽的高度，我将进行裁剪。

【讨论】：