Come posso ingrandire un elemento HTML in Firefox e Opera?Come posso ingrandire un elemento HTML in Firefox e Opera?
La proprietà zoom funziona in IE, Google Chrome e Safari, ma non funziona in Firefox e Opera.
Esiste un metodo per aggiungere questa proprietà a Firefox e Opera?
provare questo codice, questo sarà il lavoro:
-moz-transform: scale(2);
è possibile fare riferimento a this.
Questo funziona perfettamente. C'è un metodo per cambiare -moz-transform fattore di scala in percentuale – shahul
È una percentuale in forma decimale. (1 = 100% 2 = 200% 0,2 = 20%) Ma credo che si possa usare anche la notazione percentuale. http://www.w3.org/TR/css3-values/#percentages – sholsinger
Il problema con questo è quando si sono risolti gli elementi di posizione. Lo zoom funziona in modo diverso rispetto alla scala di trasformazione. –
Non funziona in modo uniforme in tutti i browser. Sono andato a: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage e ho aggiunto lo stile per zoom e -moz-transform. Ho eseguito lo stesso codice su firefox, IE e Chrome e ho ottenuto 3 risultati diversi.
<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" />
</body>
</html>
zoom: 145%;
-moz-transform: scale(1.45);
uso questo per essere sul lato più sicuro
Questo ingrandisce 2x nel webkit. Pugno di zoom, secondo di scala –
Zoom e trasformare scala non sono la stessa cosa. Sono applicati in momenti diversi. Lo zoom viene applicato prima che il rendering avvenga, trasformare - dopo. Il risultato di questo è se si prende un div con larghezza/altezza = 100% nidificato all'interno di un altro div, con dimensioni fisse, se si applica lo zoom, tutto all'interno dello zoom interno si restringerà, o crescerà, ma se si applica trasforma tutto il div interno si restringerà (anche se larghezza/altezza è impostata su 100%, non saranno il 100% dopo la trasformazione).
funziona correttamente per te? :
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
Per me questo funziona bene con IE10, Chrome, Firefox e Safari:
#MyDiv>*
{
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
}
Questo zooma tutto il contenuto al 50%.
Per me questo funziona per contrastare la differenza tra zoom e la scala di trasformare, regolare per l'origine destinato desiderata:
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Usa scale invece! Dopo molte ricerche e prove che ho fatto questo plugin per realizzarla cross browser:
$.fn.scale = function(x) {
if(!$(this).filter(':visible').length && x!=1)return $(this);
if(!$(this).parent().hasClass('scaleContainer')){
$(this).wrap($('<div class="scaleContainer">').css('position','relative'));
$(this).data({
'originalWidth':$(this).width(),
'originalHeight':$(this).height()});
}
$(this).css({
'transform': 'scale('+x+')',
'-ms-transform': 'scale('+x+')',
'-moz-transform': 'scale('+x+')',
'-webkit-transform': 'scale('+x+')',
'transform-origin': 'right bottom',
'-ms-transform-origin': 'right bottom',
'-moz-transform-origin': 'right bottom',
'-webkit-transform-origin': 'right bottom',
'position': 'absolute',
'bottom': '0',
'right': '0',
});
if(x==1)
$(this).unwrap().css('position','static');else
$(this).parent()
.width($(this).data('originalWidth')*x)
.height($(this).data('originalHeight')*x);
return $(this);
};
usege:
$(selector).scale(0.5);
nota:
Si creerà un involucro con una classe scaleContainer. Prenditi cura di ciò mentre modifichi i contenuti.
Ho giurato su questo per un po '. Lo zoom non è sicuramente la soluzione, funziona in chrome, funziona parzialmente in IE ma muove l'intero div html, Firefox non fa nulla.
La mia soluzione che ha funzionato per me è stato utilizzando sia un ridimensionamento e una traduzione, e aggiungendo anche l'altezza e il peso originale e quindi impostando l'altezza e il peso del div stesso:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Ovviamente cambiare queste a i tuoi bisogni Mi ha dato lo stesso risultato in tutti i browser.
Vorrei cambiare zoom per transform in tutti i casi perché, come spiegato da altre risposte, non sono equivalenti. Nel mio caso era anche necessario applicare la proprietà transform-origin per posizionare gli articoli dove volevo.
questo ha lavorato per me in Chome, Safari e Firefox:
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
risposta Solo corretta e compatibile W3C è: <html> oggetto e rem. trasformazione non funziona correttamente se si scala verso il basso (per esempio scala (0,5)
Usa:.
html
{
font-size: 1mm; /* or your favorite unit */
}
e utilizzare nel codice unità "rem" (compresi gli stili per <body>) unità invece metriche. "%" s senza modifiche Per tutti gli sfondi impostare la dimensione dello sfondo Definire la dimensione del carattere per il corpo, ereditata da altri elementi
se si verifica una condizione che genera uno zoom diverso da 1.0, modificare la dimensione del carattere per tag (via CSS o JS)
ad esempio:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
Questo rende equivalente di zoom: 0.5 senza problemi JS con clientX e posizionamento durante gli eventi di trascinamento.
Non utilizzare "rem" nelle query multimediali.
Non hai davvero bisogno di zoom, ma in alcuni casi può essere un metodo più veloce per i siti esistenti.
Mi riferirei a [questa domanda] (http://stackoverflow.com/questions/1156278/css-how-to-scale-entire-web-page-with-css) che risponde abbastanza bene al vostro. – Ben