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

Descargar el PDF
Descargar el PDF

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

Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    <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]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si no te agrada el tamaño de la imagen, puedes repetir los pasos anteriores. [2]
    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

wikiHows relacionados

Cómo
ejecutar un programa desde el símbolo del sistema en Linux
Cómo
hacer un programa usando Bloc de notas
Cómo
formatear texto como código en Discord
Cómo
usar el comando net send
Cómo
convertir de decimal a hexadecimal
Cómo
alinear textos e imágenes en HTML
Cómo cambiar un código de cerradura de Kwikset
Cómo
ejecutar un archivo Python desde el Símbolo del sistema de Windows
Cómo comentar múltiples líneas en Python: formato y accesos directos
Cómo
crear un archivo EXE
Cómo
calcular porcentaje en Java
Cómo
centrar un texto en lenguaje HTML
Cómo cambiar códigos de usuario de 4 dígitos en cerraduras Schlage
Cómo
sumar dos números en Visual Basic.Net
Anuncio

Referencias

  1. ↑ https://www.w3schools.com/html/html_images.asp
  2. ↑ https://www.w3schools.com/tags/att_img_width.asp
  3. http://www.w3schools.com/ . Aquí encontrarás toda la información relacionada con HTML.

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 38 545 visitas.

¿Te ayudó este artículo?

Anuncio