Cómo cambiar el tamaño de una imagen con HTML

Letras HTML 3D

Los pasos a continuación guían a los usuarios que desean mantener una imagen en su tamaño de archivo original (en KB o MB) y redimensionar el tamaño de visualización de la imagen con HTML. Aunque esto es posible, le sugerimos que cambie el tamaño de una imagen utilizando un editor de imágenes para reducir el tamaño del archivo y el tiempo de descarga de la imagen.

Cuando se cambia el tamaño de una imagen usando los pasos a continuación, todavía tiene que cargar la imagen más grande, aunque parezca más pequeña en el navegador.


Redimensionar con HTML

Especifique el ancho y la altura en su etiqueta HTML IMG SRC como se muestra en el ejemplo a continuación.

<img src = "http://abrirarchivos.info/blog/wp-content/uploads/2021/12/computer-hope-1.jpg" width = "200" height = "40" alt = "Computer Hope">

Cómo aparece la imagen normalmente

Logotipo de Computer Hope normal

Usando el código anterior para cambiar el tamaño de la imagen

Logotipo de Computer Hope normal


Redimensionar con CSS

También puede cambiar el tamaño de una imagen a través de CSS, como se muestra en los ejemplos a continuación.

img.resize {ancho: 200px; altura: 40px; }
img.resize {ancho máximo: 50%; altura máxima: 50%; }

En el primer ejemplo, el tamaño real en píxeles se especifica para ancho y alto. Al usar esta opción, limita las imágenes que usan ese CSS. Dado que especifica un ancho y una altura, este método podría generar imágenes distorsionadas si no tiene una relación de aspecto de 5: 1.

El segundo ejemplo especifica un porcentaje del tamaño de la imagen original, tanto el ancho como la altura, en lugar del tamaño en píxeles. Al usar esta opción, permite su uso con una mayor variedad de imágenes. Dado que se especifica un porcentaje del ancho y alto de la imagen, el navegador puede cambiar el tamaño de casi cualquier imagen y mantener su relación de aspecto.

Para aplicar el CSS a una etiqueta HTML IMG SRC, debe hacer lo siguiente.

<img class = "resize" src = "http://abrirarchivos.info/blog/wp-content/uploads/2021/12/computer-hope-1.jpg" alt = "Logotipo de Computer Hope pequeño">

El uso de CSS da como resultado etiquetas IMG SRC más cortas, ya que solo tiene que especificar el nombre de la clase en la etiqueta para activar el código CSS para esa imagen.


Deja un comentario