Propiedades height y width del elemento <img> en HTML
Ejemplo
Establecer el ancho y la altura de la imagen en 200 píxeles:
<img src="/i/mouse.jpg" height="200" width="200" />
Definición y uso
La propiedad height y width del elemento <img> establece el tamaño de la imagen.
Consejo:Es una buena práctica especificar las propiedades height y width para la imagen. Si se establecen estas propiedades, se puede reservar espacio para la imagen en el momento del carga de la página. Si no se establecen estas propiedades, el navegador no puede conocer el tamaño de la imagen y, por lo tanto, no puede reservar el espacio adecuado, lo que causará que el diseño de la página cambie cuando la imagen se cargue.（以下内容详细解释了这一观点）。
Consejo:No es recomendable escalar imágenes a través de los atributos height y width. Si se reduce la imagen a través de estos atributos, el usuario debe descargar una imagen de gran capacidad (incluso si la imagen parece pequeña en la página). Lo correcto es procesar el tamaño adecuado de la imagen con software antes de usarla en la página web.
Más ejemplos
Cambiar el tamaño de la imagen - Crear imágenes de relleno
Los atributos 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 y ampliar una imagen muy pequeña. Pero es importante tener en cuenta: el navegador aún debe descargar el archivo completo, independientemente del tamaño que finalmente se muestre, y si no se mantiene la proporción original de anchura y altura, la imagen se deformará.
Otra técnica para usar los atributos height y width es la facilidad de llenar una área de la página, al mismo tiempo que se mejora el rendimiento del documento. Imagina que deseas colocar una barra horizontal de color en el documento. No necesitas crear una imagen de tamaño completo, en su lugar, solo necesitas crear una imagen de un solo píxel de anchura y altura, y asignar el color que deseas usar. Luego, usa los atributos height y width para expandirla a un tamaño mayor.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Este es el efecto de la sección HTML anterior, esta barra de color es hecha con una imagen de un solo píxel:
Uso de porcentajes
Una técnica final para usar el atributo width es sustituir los valores absolutos en píxeles por porcentajes. Esto permitirá que el navegador escalé la imagen en proporción al tamaño de la ventana de visualización del navegador. Por lo tanto, si se desea crear una barra horizontal de color con anchura igual al ancho de la ventana de visualización y altura de 30 píxeles, se puede lograr 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 width en forma de porcentaje y se omite height, el navegador mantendrá la proporción de anchura y altura de la imagen, ya sea al ampliar o reducir. Esto significa que la proporción de altura a anchura de la imagen no cambiará, y la imagen no se deformará.
Vea el siguiente HTML:
<img src="/i/ct_1px.gif" width="20%" />
Es decir, si solo se establece el valor porcentual del atributo width de la imagen ct_1px.gif, se obtendrá una imagen rectangular (porque el ct_1px.gif original es una imagen rectangular de 1px de ancho y alto):
Consejo:Puede probar en nuestras herramientas de prueba en líneaPruebe usted mismo!
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 de gran área para decorar la página, es mejor:Uso de CSS para crear colores de fondo.
Compatibilidad del navegador
Todos los navegadores admiten las propiedades height y width.
Sintaxis
<img height="value" />
o:
<img width="value" />
Valor de la propiedad
| Valor | Descripción |
|---|---|
| pixels | Valores de altura o ancho en píxeles. |
| percent | Valores de altura o ancho en porcentaje del elemento que contiene. |
Ejemplo TIY
- Ajustar el tamaño de la imagen
- Este ejemplo muestra cómo ajustar el tamaño de la imagen a diferentes dimensiones.
Explicación de las propiedades height y width
¿Por qué usar las propiedades height y width?
¿Ha visto alguna vez que el contenido de un documento se mueve irregularmente mientras se carga? Esto es porque el navegador ajusta constantemente el diseño de la página para poder mostrar cada imagen cargada. El navegador descarga y analiza el ancho y la altura de la imagen para determinar su tamaño, luego deja un espacio rectangular correspondiente en la ventana de visualización. Luego, el navegador ajusta el diseño de la página para insertar la imagen en la visualización. Esto también nos indica que las imágenes son archivos independientes y se cargan por separado del archivo de origen.
Sin embargo, esto no es el método más efectivo para mostrar un documento, porque el navegador debe verificar cada archivo de imagen y calcular su espacio en pantalla antes de mostrar el contenido adyacente y posterior. Esto podría causar un gran retraso en la visualización del documento, interrumpiendo la lectura del usuario.
Para los creadores, un método más efectivo es especificar el tamaño de la imagen a través de las propiedades height y width del etiqueta <img>. De esta manera, el navegador reserva un espacio antes de descargar la imagen, lo que acelera la visualización del documento y evita que el contenido se mueva.
Problemas con las propiedades height y width
Aunque las propiedades height y width de la etiqueta <img> pueden mejorar el rendimiento y permitir algunas técnicas pequeñas, hay algunos efectos negativos difíciles de manejar al usarlas. Incluso si el usuario ha desactivado la función de descarga automática de imágenes, el navegador aún mostrará el espacio reservado para la imagen con el tamaño especificado. Y generalmente, esto deja a los lectores con un cuadro vacío, con un icono sin sentido que indica la ubicación donde se colocaría la imagen. En este caso, la página se verá muy mal, como si no hubiera sido completada, 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, al menos留有一些文字可以阅读.
Para este problema no tenemos una solución, solo podemos enfatizar un punto, es usar Atributo alty conTexto 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 acción que pueda mejorar el rendimiento de la red.
