jQuery - изменяемый размер пользовательского интерфейса Изменение размера всех дочерних элементов и его размер шрифта

Question

Я искал ответ на эту проблему в течение 1 дня, но пока не нашел его!

Я хочу изменить размеры всех дочерних элементов, вычисляя и сравнивая размер их родителей с ними, когда их родительский размер изменяется, а затем применяет ширину и высоту к каждому дочернему элементу.

Я написал несколько строк кода, но это не работает, как ожидалось. Размеры детей сумасшедшие с этим:

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

            });

Может быть, кто-то может помочь мне исправить мои коды выше, чтобы изменение размеров дочерних элементов прошло гладко!

РЕДАКТИРОВАТЬ:

Вот демо скрипки.

Вы можете видеть, что по моему коду выше размеры дочерних элементов становятся дикими, в то время как я хочу, чтобы их размер плавно соответствовал их родительскому размеру.

Я знаю, что могу установить ширину и высоту дочернего элемента в процентах с помощью jquery или css, но я не хочу делать это таким образом, потому что размер текста не может быть изменен, чтобы соответствовать размеру контейнера в процентах!

Answer 1

Причина, по которой ваш текущий код не позволяет вам сохранять размер дочерних элементов (и их размер шрифта) относительно их родительских размеров, заключается в том, что у вас нет измерений исходных дочерних и родительских измерений / соотношений, поэтому вы не можете рассчитать, сколько их измерений имеют изменилось (и, соответственно, насколько вам нужно изменить дочерние размеры / размер шрифта).

Один из способов использовать эту информацию для расчетов - сохранить их в 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соотношения его нынешних и исходных размеров вычисляются, а затем умножаются на размеры и размер шрифта его дочерних элементов.

Вот JSFiddle для демонстрации. Надеюсь это поможет! Дайте знать, если у вас появятся вопросы.