Tutorial:XHTML

Tamaño de imágenes

HTML insertará por defecto la imagen en su tamaño original. Sin embargo, podrá especificarse mediante los atributos width y height una anchura y una altura.

Podremos cambiar el tamaño de la imagen sin distorsionarla especificando únicamente un atributo (width o height).

En caso que quiera distorsionarse deberá definirse una altura o una anchura.

Los valores para estos atributos pueden especificarse en pixeles o en porcentaje. Cuando el tamaño se expresa en porcentaje, el resultado variará dependiendo del navegador:

Ejemplo 1: <img src="ruta-de-la-imagen" width="200px" />
Ejemplo 2: <img src="ruta-de-la-imagen" width="50%" />
Ejemplo 3: <img src="ruta-de-la-imagen" width="200px" height="50px" />

Ejemplo 1: Se forzará a mostrar la imagen con una anchura de 200 píxeles y una altura proporcional. En caso de que la imagen original fuera de 100px de ancho y 200px de alto, se estaría mostrando la imagen con unas dimensiones de 200px (ancho) y 400px (alto).

Ejemplo 2: Se forzará a mostrar la imagen incrementada en un 50% de su tamaño real manteniendo las proporciones de altura y anchura.

Ejemplo 3: Se forzará a mostrar la imagen con un tamaño de 200px de anchura y 50px de altura. La imagen quedará distorsionada si las proporciones no se mantienen respecto a las dimensiones del original.