Comment puis-je agrandir un élément HTML dans Firefox et Opera?Comment puis-je zoomer un élément HTML dans Firefox et Opera?
La propriété zoom fonctionne dans IE, Google Chrome et Safari, mais elle ne fonctionne pas dans Firefox et Opera.
Existe-t-il une méthode pour ajouter cette propriété à Firefox et Opera?
Ya cela fonctionne parfaitement. Y at-il une méthode pour changer -moz-transformer le facteur d'échelle en pourcentage – shahul
Il s'agit d'un pourcentage sous forme décimale. (1 = 100% 2 = 200% 0.2 = 20%) Mais je crois que vous pouvez également utiliser la notation en pourcentage. http://www.w3.org/TR/css3-values/#percentages – sholsinger
Le problème avec ceci, c'est quand vous avez des éléments de position fixes. Le zoom fonctionne différemment de l'échelle de transformation. –
Il ne fonctionne pas de manière uniforme dans tous les navigateurs. Je suis allé à: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage et ajouté le style pour zoom et -moz-transformer. J'ai couru le même code sur firefox, IE et chrome et j'ai obtenu 3 résultats différents.
<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);
utilisation que ce soit sur le côté plus sûr
Ce zooms 2x dans webkit. Poing par zoom, deuxième par échelle –
Zoom et transformation de l'échelle ne sont pas la même chose. Ils sont appliqués à des moments différents. Le zoom est appliqué avant que le rendu ne se produise, transformer - après. Le résultat de ceci est si vous prenez un div avec largeur/hauteur = 100% imbriqué à l'intérieur d'un autre div, avec une taille fixe, si vous appliquez un zoom, tout dans votre zoom interne rétrécira, ou grandir, mais si vous appliquez transformer votre entière div interne va diminuer (même si la largeur/hauteur est fixée à 100%, ils ne vont pas être 100% après la transformation).
Cela fonctionne-t-il correctement pour vous? :
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
Pour moi, cela fonctionne bien avec IE10, Chrome, Firefox et Safari:
#MyDiv>*
{
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
}
Ce effectue un zoom avant tout le contenu à 50%.
Pour moi, cela fonctionne pour contrer la différence entre le zoom et l'échelle de transformer, adapter l'origine destinée souhaitée:
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Utilisez scale à la place! Après de nombreuses recherches et tests que je l'ai fait ce plugin pour y parvenir navigateur croix:
$.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);
Note:
Il va créer une enveloppe avec une classe scaleContainer. Prenez soin de cela tout en stylisant le contenu.
Je jure à ce sujet depuis un moment. Le zoom n'est définitivement pas les solutions, ça marche en chrome, ça marche partiellement en IE mais ça bouge tout le div html, firefox ne fait rien.
Ma solution qui a fonctionné pour moi a été à l'aide à la fois une mise à l'échelle et une traduction, et en ajoutant la hauteur d'origine et le poids, puis régler la hauteur et le poids du div lui-même:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Il est évident que changer pour des vos propres besoins. Cela m'a donné le même résultat dans tous les navigateurs.
Je voudrais changer zoom pour transform dans tous les cas, car, comme expliqué par d'autres réponses, ils ne sont pas équivalents. Dans mon cas, il était également nécessaire d'appliquer la propriété transform-origin pour placer les éléments où je voulais.
Cela a fonctionné pour moi dans Chome, Safari et Firefox:
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
réponse correcte et uniquement compatible W3C est: objet <html> et rem. transformation ne fonctionne pas correctement si vous réduisez la taille (par exemple échelle (0,5)
Utilisation:.
html
{
font-size: 1mm; /* or your favorite unit */
}
et utiliser dans votre code unité "rem" (y compris les styles pour <body>) unités à la place métriques. Pour tous les arrière-plans, définissez la taille de l'arrière-plan Définissez la taille de la police pour le corps, qui est héritée par les autres éléments
Si une condition survient qui doit déclencher un zoom autre que 1.0, changez la taille de police pour tag (via CSS ou JS)
par exemple:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
Cela rend équivalent de zoom: 0,5 sans problème dans JS avec clientX et positionnement lors d'événements glisser-déposer. N'utilisez pas "rem" dans les requêtes média.
Vous n'avez vraiment pas besoin de zoom, mais dans certains cas, il peut accélérer la méthode pour les sites existants.
Je vous renvoie à [cette question] (http://stackoverflow.com/questions/1156278/css-how-to-scale-entire-web-page-with-css) qui répond à la vôtre à fond. – Ben