Question

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

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

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

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

任何想法如何解决？

感谢阿德里安

Answer 1

当谈到图像和尺寸时 - 你必须做出一些选择。

通常你要么维持aspectRatio＆amp;剪辑（切断溢出）或调整aspectRatio（更改尺寸压缩图像）并确保显示整个图像而不剪裁。

有优点＆amp;根据你的具体应用，每个都有缺点 - 这里 - 外部对话窗口无法'调整大小'但是你在父级上维护了aspectRatio，这意味着它将使用图像缩放窗口....它不是在图像下方添加更多空间或缩放空间 - 它会缩放窗口以使图像的宽度高于其他所有值，这会在图像下方产生额外的负空间。

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

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

在这里，我错误地确保图像尽可能地使用100％的窗口宽度和尽可能多的（同时保持A.R.）高度来填充窗口。如果高度小于aspectRatio允许仍然使用全宽度的高度，我正在削减。

Answer 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/

Answer 3

$（ '＃DJ-操纵器'）。可调整大小（{ 遏制：'父母'， aspectRatio：true， maxWidth：96， maxHeight：72， resize：function（evt，ui）{ 。ui.element.parent（）的CSS（{宽度： ''，高度： ''}）; } }）;

这解决了我的问题：）

调整大小时保持.ui-dialog-content的宽高比

3 个答案: