jQuery

Question

我一直在寻找这个问题的答案1天，但还没找到！

我想调整所有 child 元素的大小，方法是在 parent 调整大小时计算并比较它们的 parent 大小，然后将宽度和高度应用于每个 child仁.

我写了一些代码行，但这似乎没有按预期工作。 children 尺码以这种方式疯狂：

            $('.parentElement').resizable({
                resize: function(e, ui) {
                    var thisw = $(this).outerWidth();
                    var thish = $(this).outerHeight();

                      $(this).find("*").each(function(i, elm){
                        elw = $(elm).outerWidth();
                        elh = $(elm).outerHeight();
                        wr = parseFloat(elw) / parseFloat(thisw);
                        hr = parseFloat(elh) / parseFloat(thish);
                            w = elw * wr;
                            h = elh * hr;
                        $(elm).css({"width": w, "height": h});
                     });
                },

            });

也许有人可以帮助我更正上面的代码，以便 child 元素的大小调整顺利进行！

编辑：

这里是fiddle demo.

你可以看到，通过我上面的代码，children 尺寸变得疯狂，而我希望它们能够平滑地调整大小以适应它们的 parent 尺寸。

我知道我可以通过 jquery 或 css 按百分比设置 children 元素的宽度和高度，但我不想那样做，因为文本的无法按百分比调整大小以适应容器的大小！

Answer 1

您当前的代码无法实现保持 children（及其字体大小）与其 parent 相对大小的意图的原因是您没有对原始 child 和 parent dimensions/ratios，所以你无法计算它们的尺寸改变了多少（以及你需要改变多少 child dimensions/font 尺寸）。

利用此信息进行计算的一种方法是在调整大小之前将它们存储在 data 属性中：

// Storing initial parent CSS
$('.parentElement').each(function(){
    $(this).data("height", $(this).outerHeight());
    $(this).data("width", $(this).outerWidth());
});

// Storing initial children CSS
$('.parentElement *').each(function(){
    $(this).data("height", $(this).outerHeight());
    $(this).data("width", $(this).outerWidth());
    $(this).data("fontSize", parseInt($(this).css("font-size")));
});

$('.parentElement').resizable({
    resize: function (e, ui) {
        var wr = $(this).outerWidth()/$(this).data("width");
        var hr = $(this).outerHeight()/$(this).data("height");

        $(this).find("*").each(function (i, elm) {
            var w = $(elm).data("width") * wr;
            var h = $(elm).data("height") * hr;
            // Adjusting font size according to smallest ratio
            var f = $(elm).data("fontSize") * ((hr > wr) ? wr : hr);
            $(elm).css({
                "width": w,
                "height": h,
                "font-size": f
            });
        });
    },
});

现在，每次调整 .parentElement 的大小，都会计算其当前尺寸与原始尺寸的比率，然后乘以其 children 的尺寸和字体大小。

这里有一个JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

jQuery - UI 可调整大小调整所有 Child 元素及其 Font-Size

jQuery - UI Resizable Resize All Child Elements And Its Font-Size

javascript

children

elements

resizable