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

Descargar el PDFDescargar 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 How.com.vn, aprenderás a especificar el tamaño de una imagen en tu código HTML.

  1. How.com.vn Español: Step 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. How.com.vn Español: Step 2 Agrega esta línea al código:
    <img src="archivoimagen.jpg" alt="How.com.vn Español: 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="How.com.vn Español: 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. How.com.vn Español: Step 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. How.com.vn Español: Step 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]
    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

Acerca de este How.com.vn

How.com.vn es un "wiki", lo que significa que muchos de nuestros artículos están escritos por varios autores. Para crear este artículo, autores voluntarios han trabajado para editarlo y mejorarlo con el tiempo. Este artículo ha sido visto 36 976 veces.
Categorías: Programación
Esta página ha recibido 36 976 visitas.

¿Te ayudó este artículo?

⚠️ Disclaimer:

Content from Wiki How Español language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

Notices:
  • - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
  • - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
  • - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
  • - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

Anuncio