CSS | cambiar el tamaño de la propiedad

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
    • 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:

      • Google cromo 1
      • Borde 79
      • firefox 4
      • Ópera 12.1
      • Safari 3

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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