Cómo establecer el ancho y la altura de una imagen en HTML

Coescrito por Darlene Antonelli, MA

Los atributos del ancho y la altura en HTML especifican el tamaño de una imagen en píxeles. En HTML 4.01, la altura podría definirse en píxeles o en porcentajes del elemento contenedor. En HTML5, el valor debe estar en píxeles. En este wikiHow, aprenderás a especificar el tamaño de una imagen en tu código HTML.

Pasos

1
Abre el documento HTML en un editor de textos. Las computadoras con Windows y Mac tienen por defecto programas editores de texto como Bloc de Notas y Edición e texto, los cuales funcionan para crear o editar HTML. Puedes abrir el documento HTML dentro del programa al hacer clic en “Abrir” en la pestaña “Archivo”, o al hacer clic derecho en el archivo del navegador de archivos y luego en “Abrir con…”.
2
Agrega esta línea al código: <img src="archivoimagen.jpg" alt="Image" height="42" width="42">
- src es la ruta del archivo de la imagen.
- alt es la etiqueta que le asignas a la imagen.
- Ten en cuenta que esos números están en píxeles.
- También puedes usar la etiqueta style. Por ejemplo, tendrías el siguiente código en el texto: <img src="imgfile.jpg" alt="Image" style="width:500px;height:600px;">. La etiqueta style garantiza que la imagen se quede del mismo tamaño y anule cualquier comando de tamaño de imagen adicional.^{[1]
  X
  Fuente de investigación}
3
Cambia los valores de height y width. Por ejemplo, si ingresas 21 en las áreas width y height, obtendrás una imagen de la mitad el tamaño que la original.
4
Guarda el archivo y ábrelo usando cualquier navegador para ver los cambios. Si no te agrada el tamaño de la imagen, puedes repetir los pasos anteriores. ^{[2]
X
Fuente de investigación}

Anuncio

Consejos

Especifica siempre los atributos "height" y "width" en las imágenes. Si la altura y el ancho están especificados, se reservará el espacio requerido para la imagen al cargar la página. Sin embargo, sin estos atributos, el navegador no conoce el tamaño de la imagen, por lo que no puede reservar el espacio correspondiente. Como consecuencia, la distribución de los elementos de la página podría cambiar durante la carga (es decir, mientras se cargan las imágenes).
Si reduces el tamaño de una imagen grande usando los atributos "height" y "width", forzarás al usuario a descargar la imagen grande (incluso a pesar de que en la página se vea pequeña). Para evitarlo, ajusta el tamaño de la imagen usando un programa antes de subirla a la página.

Anuncio