Изменение размера и ширины в процентах не пикселей

Я использую плагин jQuery для изменения размера элементов. Высота и ширина элементов задаются в процентах (%), а не в пикселях. Всякий раз, когда я изменяю размер любого элемента, высота и ширина меняются на пиксели, которые фиксированы, но я хотел это изменение в процентах.

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

#parentDiv { height:100%; width:100%;}

.image { height: 25%; width: 25%; }  

<body>
<div id = "parentDiv">
    <div class="image" id="image1" onmouseover="resizeMe(this);"> </div>
    <div class="image" id="image2" onmouseover="resizeMe(this);"> </div>
</div>  

<script> 
  function resizeMe(obj) {
        $(#obj.id).resizable();  }

</body>

Но как только я изменил размер id = image1, ниже приведен код HTML. он содержит размер высоты и ширины в пикселях. Кто-нибудь светится на нем, как мне удастся изменить размер только в процентах.

<div class="image" style="width: 345px; height: 52px;">

Ответы

Ответ 1

jQuery получает свои значения из движка DOM браузеров, которые всегда возвращают нормализованные значения в пикселях, независимо от того, как они были встроены.

Таким образом, единственный способ, которым вы сможете это сделать, - пересчитать проценты на основе ширины/высоты элементов и ширины и высоты родителей после прекращения изменения размера.

$(".image").resizable({
    autoHide: true,
    stop: function(e, ui) {
        var parent = ui.element.parent();
        ui.element.css({
            width: ui.element.width()/parent.width()*100+"%",
            height: ui.element.height()/parent.height()*100+"%"
        });
    }
});

См. выше в действии на jsFiddle

Обратите внимание, как я устанавливаю ширину/высоту с помощью .css вместо .width и .height. Это связано с тем, что последний будет нормализован движком DOM и превращен в пиксели.

Теперь к некоторой обратной связи по вашему коду. Это довольно беспорядок, если быть честным. Это очень плохая практика использования встроенных стилей и скриптов. Установите ширину/высоту #parentDiv с помощью css так же, как вы сделали с .image. И не используйте атрибут onmouseover. Вместо этого привяжите событие с помощью jQuery, используя .bind.

Также вы не должны изменять размер элементов на мыши. Это нужно сделать один раз, когда документ будет готов. Используйте параметр autoHide, чтобы скрыть обработчики, когда мышь не находится над элементом. Альтернативой является привязка методов enable и disable к наведению мыши, но это не будет иметь одинакового результата.