propiedad height de <img> HTML

Etiqueta <img> de HTML

definición y uso

altura propiedad que define la altura de la imagen en píxeles.

Consejo:siempre debe especificar para la imagen altura y propiedad de ancho。Si se han configurado la altura y el ancho, se reservará el espacio necesario para la imagen al cargar la página. Por el contrario, si no se tienen estos atributos, el navegador no sabrá el tamaño de la imagen y no podrá reservar un espacio adecuado para ella. Esto puede causar que el diseño de la página cambie durante la carga (cuando se carga la imagen).

Consejo:usar altura y ancho Reducir el tamaño de la imagen atributo obliga al usuario a descargar la imagen grande (incluso si se ve muy pequeña en la página). Para evitar esto, use software de procesamiento de imágenes para ajustar el tamaño de la imagen antes de usarla en la página.

Leer más:Detalles de las propiedades height y width

Ejemplo

Una imagen de 600 píxeles de altura y 500 píxeles de ancho:

<img src="img_girl.jpg" alt="Chica con chaqueta" width="500" height="600">

Inténtelo personalmente

Sintaxis

<img height="píxeles">

Valor de atributo

Valor Descripción
píxeles Especificar la altura de la imagen en píxeles (por ejemplo, height="100").

Más ejemplos

Cambiar el tamaño de la imagen - Crear imágenes de relleno

Las propiedades height y width tienen una característica oculta: no es necesario especificar el tamaño real de la imagen, es decir, estos valores pueden ser más grandes o más pequeños que el tamaño real. El navegador ajustará automáticamente la imagen para que se ajuste al tamaño del espacio reservado. Con este método, se puede crear fácilmente una miniatura de una imagen grande o ampliar una imagen muy pequeña. Pero es necesario tener en cuenta: el navegador aún debe descargar el archivo completo, independientemente del tamaño final que se muestre, y si no se mantiene la proporción original de anchura y altura, la imagen se deformará.

Otra técnica para usar las propiedades height y width es lograr fácilmente el relleno de una área de la página, al mismo tiempo que se mejora el rendimiento del documento. Imagine que desea放置 una barra horizontal coloreada en el documento. No es necesario crear una imagen de tamaño completo, en su lugar, simplemente cree una imagen de 1 píxel de ancho y alto y asigne a la misma el color que desea usar. Luego, use las propiedades height y width para expandirla a un tamaño mayor.

<img src="/i/ct_1px.gif"} width="200px" height="30px" />

Este es el efecto del siguiente fragmento de HTML, esta barra de color es hecha con una imagen de un solo píxel:

Usar porcentajes

Una técnica final para usar la propiedad width es reemplazar el valor absoluto en píxeles con un porcentaje. Esto permitirá que el navegador escalé la imagen en proporción al tamaño de la ventana de visualización. Por lo tanto, si desea crear una barra horizontal coloreada de ancho igual al de la ventana de visualización y altura de 30 píxeles, puede hacerlo de la siguiente manera:

<img src="/i/ct_1px.gif"} width="60%" height="30px" />

Cuando cambia el tamaño de la ventana del documento, el tamaño de esta imagen también cambia:

Consejo:Si se proporciona un valor de ancho en forma de porcentaje y se ignora la altura, el navegador mantendrá la proporción de anchura y altura de la imagen, ya sea que se amplíe o reduzca. Esto significa que la proporción de altura a anchura de la imagen no cambiará y la imagen no se deformará.

Por favor, vea el siguiente HTML:

<img src="/i/ct_1px.gif"} width="20%" />

Es decir, si solo se establece el valor porcentual de la propiedad width del archivo de imagen ct_1px.gif, se obtendrá una imagen rectangular (porque el archivo original ct_1px.gif es un rectángulo de 1px de ancho y alto):


Inténtelo personalmente

Consejo:El propósito de proporcionar los ejemplos anteriores es para que pueda entender mejor el uso de las propiedades height y width. Si solo necesita bloques de color puro grandes para decorar la página, entonces es mejorUsar CSS para crear el color de fondo.

Detalles de las propiedades height y width

Por qué usar las propiedades height y width

¿Ha visto alguna vez que el contenido del documento se mueve irregularmente mientras se carga? La razón es que el navegador ajusta constantemente el diseño de la página para poder mostrar cada imagen que se carga. El navegador descarga y analiza el ancho y la altura de la imagen para determinar el tamaño de la imagen, luego deja un espacio rectangular correspondiente en la ventana de visualización. Luego ajusta el diseño de visualización de la página para insertar la imagen en la visualización. Esto también nos dice que las imágenes son archivos independientes y se cargan de manera independiente de los archivos de origen.

Pero esto no es el método más efectivo para mostrar el documento, porque el navegador debe verificar cada archivo de imagen y calcular su espacio en pantalla antes de mostrar el contenido adyacente y posterior del documento. Esto podría causar un gran retraso en la visualización del documento, interrumpiendo la lectura del usuario.

Para los creadores, una manera más efectiva es especificar el tamaño de la imagen a través de las propiedades height y width del <img> etiqueta. De esta manera, el navegador reserva un espacio para la imagen antes de descargarla, lo que puede acelerar la visualización del documento y evitar que se mueva el contenido del documento. Ambas propiedades deben ser valores enteros y se expresan en píxeles el tamaño de la imagen. El orden de aparición de estas propiedades en la etiqueta <img> no importa.

Problemas de las propiedades height y width

Aunque las propiedades height y width del <img> mejoran el rendimiento y permiten algunos trucos pequeños, al usarlas también hay algunos efectos negativos complicados. Incluso si el usuario ha desactivado la función de descarga automática de imágenes, el navegador aún debe mostrar el espacio reservado para las imágenes con el tamaño especificado. Y generalmente esto deja a los lectores con una estructura vacía, con un icono sin sentido que indica que es el lugar donde se colocaría la imagen. En este momento, la página se verá muy mala, como si no estuviera terminada, y la mayoría del contenido será inútil. Si no se utilizan estos tamaños especificados, el navegador solo colocará un icono de imagen en el texto, lo que al menos permitirá que se lean algunos textos.

Para este problema aún no tenemos una solución, solo podemos enfatizar un punto, es usarlo Atributo alt yTexto descriptivoDe esta manera, el lector al menos sabrá qué falta aquí. Aun así, recomendamos que utilice estas propiedades de tamaño, ya que incentivamos cualquier comportamiento que pueda mejorar el rendimiento de la red.

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte

Etiqueta <img> de HTML