La propiedad de cambio de tamaño en CSS se usa para cambiar el tamaño del elemento de acuerdo con los requisitos del usuario. No se aplica a los elementos en línea ni a los elementos de bloque donde el desbordamiento es visible.
Sintaxis:
resize: none|both|horizontal|vertical|initial;
El valor de la propiedad:
- ninguna
- ambas cosas
- horizontal
- vertical
- inicial
- Google cromo 1
- Borde 79
- firefox 4
- Ópera 12.1
- Safari 3
ninguno: el usuario no puede cambiar el tamaño del elemento. Es un valor predeterminado.
Ejemplo:
<!DOCTYPE html><html> <head> <title>resize property</title> <style> .gfg{ border: 2px solid green; padding: 25px; width: 300px; resize: none; overflow: auto; } h1, h2 { color: green; } </style> </head> <body> <center> <h1>GeeksForGeeks</h1> <h2>resize: none;</h2> <div class="gfg"> <h2 style="color:red;">Sudo Placement</h2> <h3>Course Overview</h3> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> <p> The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </p> </div> </center> </body></html> |
Producción:
ambos: el elemento debe cambiar de tamaño en ambos lados, es decir, alto y ancho.
Ejemplo:
<!DOCTYPE html><html> <head> <title>resize property</title> <style> .gfg{ border: 2px solid green; padding: 25px; width: 300px; resize: both; overflow: auto; } h1, h2 { color: green; } </style> </head> <body> <center> <h1>GeeksForGeeks</h1> <h2>resize:both;</h2> <div class="gfg"> <h2 style="color:red;">Sudo Placement</h2> <h3>Course Overview</h3> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> <p> The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </p> </div> </center> </body></html> |
Producción:
horizontal: Se utiliza para redimensionar solo el ancho del elemento por parte del usuario.
Ejemplo:
<!DOCTYPE html><html> <head> <title>tesize property</title> <style> .gfg{ border: 2px solid green; padding: 25px; width: 300px; resize: horizontal; overflow: auto; } h1, h2 { color: green; } </style> </head> <body> <center> <h1>GeeksForGeeks</h1> <h2>resize:horizontal;</h2> <div class="gfg"> <h2 style="color:red;">Sudo Placement</h2> <h3>Course Overview</h3> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> <p> The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </p> </div> </center> </body></html> |
Producción:
vertical: solo se utiliza para cambiar el tamaño de la altura del elemento de acuerdo con los requisitos del usuario.
Ejemplo:
<!DOCTYPE html><html> <head> <title>resize property</title> <style> .gfg{ border: 2px solid green; padding: 25px; width: 300px; resize: vertical; overflow: auto; } h1, h2 { color: green; } </style> </head> <body> <center> <h1 style="color:green;">GeeksForGeeks</h1> <h2 style="color:green;">resize:vertical;</h2> <div class="gfg"> <h2 style="color:red;">Sudo Placement</h2> <h3>Course Overview</h3> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> <p> The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </p> </div> </center> </body></html> |
Producción:
initial: establece la propiedad en su valor predeterminado. Es lo mismo que ninguna propiedad.
Ejemplo;
<!DOCTYPE html><html> <head> <title>resize property</title> <style> .gfg{ border: 2px solid green; padding: 25px; width: 300px; resize: initial; overflow: auto; } h1, h2 { color:green; } </style> </head> <body> <center> <h1>GeeksForGeeks</h1> <h2>resize:initial;</h2> <div class="gfg"> <h2 style="color:red;">Sudo Placement</h2> <h3>Course Overview</h3> <p> Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> <p> The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </p> </div> </center> </body></html> |
Producción:
Navegadores compatibles: los navegadores compatibles con Resize Property se enumeran a continuación:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA