Rashid
Creé una página HTML con 100% de ancho (navegador) que tiene muchos contenidos. Los contenidos están fijos en la página y sus tamaños están tanto en píxeles como en porcentajes.
Ahora necesito agregar un panel de publicidad del 20% del ancho del navegador. y quiero ampliar el contenedor de la página y todo su contenido, INCLUYENDO EL TEXTO, al 80 % (como el zoom disponible en todos los navegadores web, pero debería ser un zoom interno).
lamentablemente mi pagina es no responde y no quiero volver a desarrollarlo o redimensionar todo su contenido desde cero.
¿Hay alguna función de zoom disponible en HTML?
Subbu
puedes usar la propiedad de transformación css
transform: scale(0.1);
transform-origin: 0% 0% 0px;
echa un vistazo a la funcionalidad de zoom que he creado
function setZoom(zoom,el) {
transformOrigin = [0,0];
el = el || instance.getContainer();
var p = ["webkit", "moz", "ms", "o"],
s = "scale(" + zoom + ")",
oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
for (var i = 0; i < p.length; i++) {
el.style[p[i] + "Transform"] = s;
el.style[p[i] + "TransformOrigin"] = oString;
}
el.style["transform"] = s;
el.style["transformOrigin"] = oString;
}
//setZoom(5,document.getElementsByClassName('container')[0]);
function showVal(a){
var zoomScale = Number(a)/10;
setZoom(zoomScale,document.getElementsByClassName('container')[0])
}.container{
width:500px;
height:500px;
background:blue;
}<input id="test" min="1" max="10" value="10" step="1" onchange="showVal(this.value)" type="range"/>
<div class="container">
</div>-
buen trabajo @subbu1191. Revisé que su violín cambiara el tamaño de cada uno y todo en el contenedor.
– Rashid
7 de mayo de 2017 a las 5:20
-
¿Puedo preguntar cuál es el propósito de
transformOrigin = [0,0]en tu violín?– Alex Pappas
20 de febrero de 2019 a las 2:22
-
@ColdCerberus, la propiedad tranform en css cambia la escala del elemento, pero a medida que la escala cambia, la posición x e y del elemento también cambia para evitar esto, la propiedad transformOrigin se usa para asegurarse de que el elemento esté presente en la misma x e y posición como antes. Eche un vistazo al violín a continuación. jsfiddle.net/j9roehqc/4
– Subbu
20 de febrero de 2019 a las 8:47
-
@subbu Gracias por esta explicación. Actualmente estoy usando esta respuesta en mi proyecto y mi problema actual es tratar de mantener el contenido/hijo centrado dentro del contenedor/padre. ¿Tengo razón en que esto
transformOriginresolverá el problema? Aunque no estoy seguro de cómo.– Alex Pappas
20 de febrero de 2019 a las 9:57
-
este código está súper roto. como puede tener tantas subidas!?
– CodificandoTuVida
15 de febrero de 2022 a las 18:19
Sumit Ghewade
He intentado hacer una funcionalidad de acercamiento y alejamiento usando HTML simple, CSS y Javascript.s
Google “escala de transformación css” si eso ayuda
– blecaf
29 de abril de 2017 a las 20:27