HTML Ancho y altura de la imagen


Ejemplo

Nota: Los atributos de ancho y alto no están en desuso en las imágenes y nunca lo han sido. Su uso se ha hecho mucho más estricto.

Las dimensiones de una imagen se pueden especificar utilizando los atributos de width y height de la etiqueta de imagen:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

Al especificar el width y el height de una imagen, su estructura le da al navegador una pista sobre cómo se debe diseñar la página, incluso si solo está especificando el tamaño real de la imagen. Si no se especifican las dimensiones de la imagen, el navegador tendrá que volver a calcular el diseño de la página después de que se cargue la imagen, lo que puede hacer que la página "salte" mientras se carga.

4.1

Puede dar a la imagen un ancho y alto, ya sea en la cantidad de píxeles CSS o en un porcentaje de las dimensiones reales de la imagen.

Estos ejemplos son todos válidos:

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
5

El ancho y el alto de la imagen deben especificarse en píxeles CSS; un valor de porcentaje ya no es un valor válido. Además, si se especifican ambos atributos, deben encajar en una de las tres fórmulas que mantienen la relación de aspecto. Aunque es válido, no debe usar los atributos de ancho y alto para estirar una imagen a un tamaño más grande.

Estos ejemplos son válidos:

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

Este ejemplo no es recomendable:

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

Estos ejemplos son inválidos:

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">