css - ejemplos - label html
¿Cómo puedo hacer zoom en un elemento HTML en Firefox y Opera? (11)
¿Cómo puedo hacer zoom en un elemento HTML en Firefox y Opera?
La propiedad de zoom funciona en IE, Google Chrome y Safari, pero no funciona en Firefox y Opera.
¿Hay algún método para agregar esta propiedad a Firefox y Opera?
¡Usa la scale cambio! Después de muchas investigaciones y pruebas, he hecho este complemento para lograrlo: navegador cruzado:
$.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:
scaleContainer un contenedor con una scaleContainer . Cuídate mientras diseñas el contenido.
Cambiaría el zoom por la transform en todos los casos porque, como se explica en otras respuestas, no son equivalentes. En mi caso, también fue necesario aplicar propiedad de transform-origin para colocar los artículos donde yo quería.
Esto funcionó para mí en Chome, Safari y Firefox:
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
He estado jurando sobre esto por un tiempo. Zoom definitivamente no es la solución, funciona en Chrome, funciona parcialmente en IE pero mueve todo el html div, firefox no hace nada.
Mi solución que funcionó para mí fue usar una escala y una traducción, y también agregar la altura y el peso originales, y luego establecer la altura y el peso del div mismo:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Obviamente cambia esto a tus propias necesidades. Me dio el mismo resultado en todos los navegadores.
No funciona de manera uniforme en todos los navegadores. Fui a: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage y agregué estilo para zoom y -moz-transform. Ejecuté el mismo código en firefox, IE y Chrome y obtuve 3 resultados diferentes.
<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>
Para mí, esto funciona bien con IE10, Chrome, Firefox y Safari:
#MyDiv>*
{
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
}
Esto acerca todo el contenido al 50%.
Para mí, esto funciona para contrarrestar la diferencia entre zoom y transformación de escala, ajustar para el origen deseado deseado:
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Solo la respuesta correcta y compatible con W3C es: <html> object and rem. la transformación no funciona correctamente si se reduce (por ejemplo, escala (0.5)).
Utilizar:
html
{
font-size: 1mm; /* or your favorite unit */
}
y use en su unidad de código "rem" (incluidos los estilos para <body> ) en lugar de unidades métricas. "%" s sin cambios. Para todos los fondos, establezca el tamaño de fondo. Defina el tamaño de fuente para el cuerpo, que es heredado por otros elementos.
si se produce alguna condición que haga un zoom de disparo distinto a 1.0, cambie el tamaño de letra de la etiqueta (a través de CSS o JS).
por ejemplo:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
Esto hace el equivalente de zoom: 0.5 sin problemas en JS con clientX y posicionamiento durante eventos de arrastrar y soltar.
No use "rem" en consultas de medios.
Realmente no necesita zoom, pero en algunos casos puede ser un método más rápido para sitios existentes.
Zoom y transformar escala no son lo mismo. Se aplican en diferentes momentos. Zoom se aplica antes de que ocurra la representación, transformación - después. El resultado de esto es si tomas un div con ancho / alto = 100% anidado dentro de otro div, con tamaño fijo, si aplicas zoom, todo dentro de tu zoom interno se encogerá o crecerá, pero si aplicas transformarás tu entero El div interno se contraerá (aunque el ancho / alto esté establecido en 100%, no será 100% después de la transformación).
esto funciona correctamente para usted? :
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
zoom: 145%;
-moz-transform: scale(1.45);
utilizar esto para estar en el lado más seguro