HTML nos permite usar imágenes en páginas web y hacerlas más atractivas aplicando diferentes estilos. Si necesita cambiar la relación de aspecto de la imagen o su imagen no se ajusta al diseño de su página web, puede cambiar su tamaño. Para este propósito, puede utilizar el “ ancho ' y ' altura ” propiedades en el “ imagen ' etiqueta. Estos valores de propiedad se pueden configurar fácilmente en píxeles CSS.

En este manual, aprenderá el método para cambiar el tamaño de la imagen en HTML.

Antes de comenzar, se requiere agregar la imagen al archivo HTML sobre el cual se realizará la operación de cambio de tamaño de la imagen.

¿Cómo incrustar una imagen en HTML?

Para agregar una imagen en HTML, use la siguiente sintaxis:

 
La descripción de la sintaxis mencionada anteriormente se describe a continuación. Los ' imagen La etiqueta ” utiliza dos atributos:

• • 'origen' se utiliza para proporcionar la ruta (URL) de la imagen.
  • 'todo' se utiliza para proporcionar el texto alternativo si la imagen no se muestra.

HTML

El siguiente código representa dos divs. En el primer div, agregamos un encabezado en el centro superior de nuestra página web como ' Tamaño de imagen en HTML ” usando la etiqueta

:

  < división >
      < centro >
        < h1 > Tamaño de la imagen en HTML h1 >
      centro >
  división >

 
El segundo div se agrega con la clase llamada ' envase ” y para representar la imagen en el centro, hemos utilizado la etiqueta

. Dentro del centro, escriba el código mencionado a continuación para agregar una imagen:

< división clase = 'envase' >
        < centro >
          < imagen origen = 'imágenes/mariposa.jpg' todo = 'texto alternativo' >
        centro >
división >

 
La imagen seleccionada con “ 640*437 La relación de aspecto se verá así:

La siguiente sección demostrará el método para cambiar el tamaño de una imagen.

¿Cómo cambiar el tamaño de la imagen en HTML?

Puede personalizar el tamaño de la imagen o cambiar su tamaño usando “ ancho ' y ' altura ” atributos para establecer su ancho y alto.

Ahora, establezcamos el valor de ancho de la imagen agregada como ' 300 ” y ver cómo funciona:

< imagen origen = 'imágenes/mariposa.jpg' todo = 'texto alternativo' ancho = '300' >

 
Se puede ver que el ancho de la imagen se ha cambiado y se ha redimensionado correctamente:

Además del ancho, el “ altura El atributo ” también se puede utilizar para el mismo propósito. Para ver la diferencia de tamaño, configure “ 550 ” píxeles como altura de la imagen:

< imagen origen = 'imágenes/mariposa.jpg' todo = 'texto alternativo' ancho = '300' altura = '550' >

 
Puede observar claramente la diferencia en el tamaño de la imagen:

Así es como se usan los atributos de ancho y alto para cambiar el tamaño de la imagen.

Conclusión

En HTML, el “ altura ' y ' ancho Los atributos ” se utilizan para cambiar el tamaño de la imagen. Puede cambiar la relación de aspecto predeterminada de la imagen añadida configurando los valores de estos atributos. Como resultado, se puede ver una clara diferencia con respecto al tamaño de la imagen. Este blog ha demostrado el método para usar las propiedades de altura y peso para cambiar el tamaño de las imágenes en HTML.