Domanda Ridimensionamento dell'altezza e della larghezza in percentuale, non in pixel


Sto usando il plugin jQuery per ridimensionare gli elementi. L'altezza e la larghezza degli elementi è impostata in percentuale (%) non in pixel. Ogni volta che ridimensiono un elemento, l'altezza e la larghezza cambiano in pixel, che è fisso ma volevo questo cambiamento in percentuale.

Sono sicuro che ci dovrebbe essere qualche problema tecnico per questo, ma ci sarebbe anche una soluzione.

#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>

Ma una volta ridimensionato id = image1, di seguito è riportato il codice HTML. contiene l'altezza e la larghezza in pixel. Qualcuno si accende, Come posso riuscire a ridimensionare solo in percentuale.

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

16
2018-05-26 06:48


origine


risposte:


jQuery ottiene i suoi valori dal motore DOM del browser, che restituisce sempre valori normalizzati in pixel, indipendentemente dal modo in cui sono stati impostati inizialmente.

Pertanto, l'unico modo per farlo è ricalcolare le percentuali in base alla larghezza / altezza degli elementi e alla larghezza / altezza dei genitori una volta interrotto il ridimensionamento.

$(".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+"%"
        });
    }
});

Vedi sopra in azione su jsFiddle

Nota come sto impostando la larghezza / altezza con .css invece di usare .width e .height. Questo perché quest'ultimo sarà normalizzato dal motore DOM e trasformato in pixel.

Ora per un feedback sul tuo codice. È un vero peccato essere onesti. È davvero una pratica sbagliata usare lo stile e gli script in linea. Imposta la larghezza / altezza di #parentDiv con css proprio come hai fatto tu .image. E non usare onmouseover attributo. Invece legare l'evento con jQuery usando .bind.

Inoltre non si dovrebbero rendere ridimensionabili gli elementi al passaggio del mouse. Dovrebbe essere fatto una volta, quando il documento è pronto. Usa il autoHide opzione per nascondere i gestori mentre il mouse non si trova sopra l'elemento. Un'alternativa è quella di legare enable e disable metodi per il passaggio del mouse al passaggio del mouse, ma questo non avrà lo stesso risultato.


24
2018-05-26 06:58