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