La propiedad de zoom en CSS se usa para aumentar o reducir el contenido. Esta propiedad se implementó para Internet Explorer antes de que este último fuera compatible con algunos otros navegadores.
Sintaxis:
zoom: percentage | number | normal;
Valor de la Propiedad: Esta propiedad acepta tres tipos de valores como se mencionó anteriormente y se describe a continuación:
- porcentaje: esta propiedad que contiene los números con el porcentaje que aumentará o disminuirá en comparación con el contenido original hace que se acerque o se aleje dependiendo de los números como
zoom:150%;. Significa que el contenido será un 150 % más grande que el contenido original. - número: esta propiedad contiene el número que se multiplicará por el contenido original, lo que hace que se acerque o se aleje dependiendo del número como
zoom:1.5;. Significa que el contenido será 1,5 veces más grande que el contenido original. - normal: esta propiedad contiene el contenido normal que no se acerca ni se aleja, básicamente esta propiedad le dice a los navegadores
zoom:1
Ejemplo: este ejemplo utiliza la propiedad de zoom CSS para cambiar el tamaño de la imagen.
<!DOCTYPE html>
<html>
<head>
<title>
CSS | zoom property
</title>
<style>
h1 {
color: green;
}
.left{
zoom: 1.2;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS | zoom property</h4>
<div>
<img class="left" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
alt="Sample image">
<img class="right" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
alt="Sample image">
</div>
</center>
<body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de zoom de CSS se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Safari
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA