La propiedad de cambio de tamaño en el CSS

CSS | cambiar el tamaño de la propiedad : Aquí, vamos a aprender acerca de la propiedad de cambio de tamaño con su sintaxis, ejemplos de CSS (Cascading Style Sheets).

CSS | cambiar el tamaño de la propiedad

nota de inicio:

Nos ocupamos de diversos elementos regularmente mientras estamos desarrollando un sitio web o una página web y para organizar, editar y dar formato a los elementos es una tarea muy crucial, ya que esos elementos son la construcción básica bloques de nuestra página web.

Entonces, ¿como sabemos que hay muchas maneras de estilo de los elementos de una página web o para cambiar la funcionalidad de estos elementos? Esta sección es toda acerca de discutir una tal propiedad conocida como propiedad de cambio de tamaño en el CSS .

Definición:

La propiedad cambio de tamaño en el CSS se utiliza para cambiar el tamaño el tamaño del elemento de acuerdo a la necesidad del usuario y también en qué direcciones. La propiedad de cambio de tamaño puede tomar 4 valores.

Sintaxis:

    Element{
Resize : none|both|vertical|horizontal;
}

Echemos un vistazo a cada propiedad …

1) cambio de tamaño: ninguno

ninguno valor se aplica a la propiedad de cambio de tamaño cuando el usuario no desea para cambiar el tamaño del elemento. También es el valor class.

Sintaxis:

    Element{
resize:none;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>None value doesn’t allow resizing of this div element.</p>
</div>
</body>
</html>

salida

The resize Property in CSS - 4

En el ejemplo anterior, no se puede cambiar el tamaño del elemento div. Es class.

2) de cambio de tamaño: tanto

tanto valor se aplica a la propiedad de cambio de tamaño cuando el usuario quiere su elemento a ser de tamaño variable en ambos lados que es el ancho y la altura.

Sintaxis:

    Element{
resize:both;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>click and drag the bottom right corner to resize the height and width of this div element.</p>
</div>
</body>
</html>

salida

The resize Property in CSS - 5

En el ejemplo anterior, para cambiar el tamaño, haga clic y arrastre la esquina inferior derecha de este elemento div.

3) de cambio de tamaño: vertical,

valor

verticales se aplica a la propiedad de cambio de tamaño cuando el usuario quiere cambiar el tamaño de la altura del elemento de acuerdo con su necesidad.

Sintaxis:

    Element{
resize:vertical;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>click and drag the bottom right corner to resize the height of this div element.</p>
</div>
</body>
</html>

salida

The resize Property in CSS - 6

En el ejemplo anterior, el usuario puede hacer clic y arrastrar la esquina inferior derecha de este elemento div cambiar el tamaño de su altura.

4) de cambio de tamaño: horizontal

horizontal valor se aplica a la propiedad de cambio de tamaño cuando el usuario desea cambiar el tamaño de la anchura del elemento de acuerdo con su necesidad.

Sintaxis:

    Element{
resize:horizontal;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>click and drag the bottom right corner to resize the width of this div element.</p>
</div>
</body>
</html>

salida

The resize Property in CSS - 7

En el ejemplo anterior, el usuario puede hacer clic y arrastrar la esquina inferior derecha de este elemento div para cambiar el tamaño de su anchura.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *