Cómo cambiar el tamaño de una imagen en HTML
Usa el atributo ‘width’ de la etiqueta ‘img’
En HTML, hay una etiqueta llamada img, y su función es mostrar imágenes usando el atributo src, el cual especifica el origen de la imagen. También se puede especificar el tamaño de la imagen usando el atributo width.
Tres formas de ingresar los valores de ancho de la imagen
Para cambiar el tamaño de una imagen en HTML hay tres formas distintas:
- Usando pixeles (px): Se especifica el número de pixeles que se desea que tenga la imagen.
- Usando porcentajes (%), con esto estaremos indicando el porcentaje de la pantalla de visualización de la imagen.
- Usando el valor ‘auto’, esto hará que la imagen se adapte automáticamente a la pantalla en la que sea visualizada.
Ejemplo de cómo cambiar el tamaño de una imagen
Vamos a usar como ejemplo la etiqueta HTML img para modificarles el ancho al 50% de la pantalla. Para ello usaremos el atributo width indicando su valor en porcentajes.
Con esto tendríamos una imagen con un ancho de la mitad de la pantalla, donde el ancho es proporcional a la pantalla en donde se visualice.
Ejemplo completo
Para un ejemplo mas completo, vamos a usar el atributo width con los tres tipos de valores :
El primero de los valores es un número que indica los 700 pixeles, seguido por un porcentaje que indica el 40% de la disposición, y el último valor es auto, el cual hace que la imagen se adapte al tamaño de la pantalla según su disposición.
Conclusión
En HTML es muy sencillo poder modificar el tamaño de una imagen. Simplemente se debe de usar el atributo width para especificarle el tamaño deseado a la imagen usando pixeles, porcentajes o el valor auto para que se adapte al tamaño de la pantalla.
Cómo Darle Tamaño a Una Imagen en HTML
HTML te permite personalizar tu imagen de múltiples maneras. Una de estas es cambiar el tamaño de la imagen. Esto puede hacerse ajustando el ancho y alto de la imagen.
Usando Atributos de ancho y alto
Los atributos de «ancho» y «alto» permiten ajustar el tamaño de una imagen. Simplemente usa los atributos «width» y «height» al etiquetar una imagen con HTML.
Los valores son definidos en pixeles:
- width – Define el ancho de la imagen.
- height – Defina el alto de la imagen.
Por ejemplo:
Esto nos dará una imagen con un ancho de 200 pixeles y un alto de 100 pixeles.
Usando HTML5 Atributos de escalado
HTML5 también admite atributos de escalado. Estos atributos permiten escalar una imagen al ancho y alto solicitados sin tener que especificar la medida exacta.
- scale – Escala la imagen al ancho o al alto solicitados, manteniendo la relación de aspecto.
- restrict – Escala la imagen al ancho y al alto solicitados, pero convertir a relación de aspecto de negocio.
- fill – Rellena la imagen al ancho y al alto solicitados, escondiendo partes de la imagen.
Los valores son definidos en porcentajes:
- scale – El ancho y alto establecidos como porcentaje del tamaño original.
- restrict – El ancho o alto establecidos como porcentaje del tamaño original.
- fill– El ancho y alto establecidos como porcentaje del tamaño original sin preservar la relación de aspecto.
Por ejemplo:
Esto nos dará una imagen con un ancho y alto de 25 por ciento de su tamaño original.
Usando Estilos CSS
Además de HTML, también es posible modificar el tamaño de una imagen usando CSS. Los estilos permiten cambiar la anchura, la altura y la relación de aspecto de una imagen.
Para cambiar el tamaño de una imagen, primero hay que escribir una etiqueta de imagen HTML:
Luego, debemos usar el atributo «style» para cambiar los valores del ancho, alto y relación de aspecto.
Usando Valores de Pixeles
Puedes escribir los valores de ancho y alto en pixeles para cambiar el tamaño de una imagen.
Ejemplo:
Usando Valores de Porcentajes
También es posible cambiar el tamaño de una imagen usando porcentajes. Esto significa que la imagen se escalará de acuerdo al contexto en el que se encuentre.
Por ejemplo:
Esto nos dará una imagen con un ancho y alto de 25 por ciento del tamaño de la pantalla.