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

HTML

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 cambie 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 con un editor de imágenes para reducir el tamaño del archivo y reducir el descargar tiempo de la imagen.

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



crear la variable de entorno windows 10

Cambiar el tamaño con HTML

Especifique el ancho y alto en su IMG SRC HTML etiqueta como se muestra en el ejemplo siguiente.

|_+_|

Cómo aparece la imagen normalmente

Esperanza informática

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

Esperanza informática



Nota

Al cambiar el tamaño de una imagen, debe mantener la relación de aspecto. De lo contrario, la imagen podría distorsionarse y perder algo de calidad de imagen.

Cambiar el tamaño con CSS

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

|_+_| |_+_|

En el primer ejemplo, el tamaño real en píxeles se especifica para el ancho y el alto. Al usar esta opción, limita las imágenes que usan ese CSS. Dado que especifica un ancho y un alto, este método podría resultar en 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 el alto, en lugar del tamaño en píxeles. El uso de 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.

|_+_|

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.