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

Question

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

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

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

这是一个fiddle： https://jsfiddle.net/0fnbnw4L/1/

有什么解决办法吗？

谢谢阿德里安

Answer 1

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

通常，您要么保持纵横比和裁剪（切断溢出），要么调整纵横比（更改压缩图像的尺寸）并确保显示整个图像而不裁剪。

根据您的具体应用，每个对话框都有利有弊，这里 - 外部对话框 window 无法 'resized' 但您在父级上保持 aspectRatio，这意味着它会用图像缩放 window....它并不是真正在图像下方添加更多 space 或缩放 space - 它缩放 window 以适应图像的宽度高于一切，这会导致图像下方出现额外的负数 space。

看看这个 fiddle：https://jsfiddle.net/0fnbnw4L/2/

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

在这里，我错误地确保图像尽可能地填充 window 使用 window 的 100% 宽度和尽可能多的（同时保持 A.R.) 尽可能的高。如果高度小于 aspectRatio 允许仍然使用全宽的高度，我正在剪裁。

Answer 2

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

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

这是最终代码：

$(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/

Answer 3

$('#dj-manipulator').resizable({ 遏制：'parent'， aspectRatio: true , 最大宽度：96，最大高度：72，调整大小：函数（evt，ui）{ ui.element.parent().css({宽度:'',高度:''}); } });

这解决了我的问题:)

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

keep aspect ratio of .ui-dialog-content when resizing

jquery

jquery-ui

dialog

aspect-ratio

jquery-ui-resizable