Atributo width de <img> HTML

Etiqueta <img> de HTML

definición y uso

width propiedad especifica el ancho de la imagen, en píxeles.

Consejo:asignar a la imagen height y width propiedad es un buen hábito. Si se establecen estas propiedades, se puede reservar espacio para la imagen en el momento de la carga de la página. Si no se tienen estas propiedades, el navegador no puede entender el tamaño de la imagen y, por lo tanto, no puede reservar el espacio adecuado, por lo que cuando se carga la imagen, el diseño de la página cambiará. (A continuación, se explica en detalle este punto).

Consejo:No utilice height y width propiedad para escalar la imagen. Si se usa height y width Si se usa la propiedad para reducir la imagen, el usuario debe descargar imágenes de gran capacidad (incluso si la imagen parece pequeña en la página). La práctica correcta es que, antes de usar la imagen en la página web, debe procesar la imagen en el software para obtener el tamaño adecuado.

Leer más:Explicación detallada 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="Girl in a jacket" width="500" height="600">

Pruebe personalmente

Sintaxis

<img width="píxeles">

Valor de la propiedad

Valor Descripción
píxeles Especificar el ancho de la imagen en píxeles (por ejemplo, width="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 importante 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 de anchura y altura original, la imagen se deformará.

Otra técnica para usar las propiedades height y width es lograr fácilmente el relleno de áreas de la página, al mismo tiempo que se mejora el rendimiento del documento. Imagine que desea放置 una barra horizontal de color en el documento. No es necesario crear una imagen de tamaño completo, en su lugar, simplemente cree una imagen de un solo 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 se ha hecho con una imagen de un solo píxel:

Usar valores porcentajes

Una técnica final para usar la propiedad width es usar valores porcentajes en lugar de valores absolutos en píxeles. Esto permitirá que el navegador escalar la imagen en proporción al tamaño de la ventana de visualización. Por lo tanto, si desea crear una barra horizontal de color que tenga el mismo ancho que la ventana de visualización y una 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, también cambia el tamaño de esta imagen:

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 no cambiará y la imagen no se deformará.

Por favor, revise 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 ct_1px.gif original es una imagen rectangular de 1px de ancho y alto):


Pruebe 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, es mejorUsar CSS para crear el color de fondo.

Explicación detallada 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 muestra en movimiento irregular cuando se carga? Esto es porque el navegador tiene que ajustar 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 el tamaño, luego deja un espacio rectangular correspondiente en la ventana de visualización. Luego, el navegador 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, que se cargan de manera independiente con 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. 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 etiqueta <img>. 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 el contenido del documento se mueva. Ambas propiedades deben ser valores enteros y se expresan en píxeles el tamaño de la imagen. La secuencia en que aparecen estas propiedades en el etiqueta <img> no importa.

Problemas con las propiedades height y width

Aunque las propiedades height y width del etiqueta <img> pueden mejorar el rendimiento y permitirle realizar algunos trucos, al usarlas 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 un cuadro vacío, 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 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 dejando algunos textos que se pueden leer.

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 usar estas propiedades de tamaño, ya que fomentamos 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