Unidad 5. Imágenes (IV)



5.6. Atributos width y height de la etiqueta <img>

El atributo width establece la anchura de visualización de la imagen, y el atributo height establece la altura de visualización de la imagen. No son obligatorios, si no aparecen la imagen tendrá su altura y anchura original. Si aparecen, modificarán el aspecto de la imagen pero no afectarán al archivo de imagen, es decir, sólo afectarán a la visualización que realiza el navegador de la imagen. Por defecto, las unidades son píxeles. Por ejemplo, si queremos que la imagen anterior se vea a la mitad de sus tamaño original (200 x 79) escribiremos este código.

<img src="graficos/logoAulaclic.jpg" width="100" height="40" />

Es importante mantener las proporciones originales si queremos que la imagen no se vea deformada. Si sólo indicamos la anchura, la altura se calculará proporcionalmente, y viceversa. Como norma general, no conviene modificar las dimensiones originales de la imagen, y sobre todo no agrandar demasiado la imagen ya que perderá resolución y no se verá bien. Es preferible modificar el tamaño de la imagen con un programa de edición fotográfica. Si necesitamos agrandar mucho una imagen es mucho mejor utilizar imágenes vectoriales, como imágenes svg, que veremos más adelante en este curso.

Si no indicamos los atributos width y height, el navegador no podrá reservar el sitio adecuado para la imagen, y puesto que el texto se carga antes que la imagen, se producirá un efecto de recomposición (o salto) de la página cuando se carge la imagen. Este efecto puede ser molesto con imágenes grandes que harán que el texto se desplace de forma más apreciable.

Hasta la versión 5 de HTML, la anchura y la altura también se podía dar en porcentaje, lo cual se utilizaba para hacer que la imagen se adaptará a todo el ancho de la pantalla dando el valor width="100%". Actualmente con la aparición de la etiqueta picture ya no es necesario utilizar ese truco para conseguir imágenes adaptables.

Por ejemplo, En la siguiente imagen hemos dado un valor de width="25%", y la imagen ocupa el 25% del ancho disponible, si redimensionas la ventana del navegador verás como va cambiando de tamaño.

<img src="graficos/logoAulaclic.jpg" width="25%"/>

Si damos una anchura en porcentaje puede que la imagen se agrande demasiado y no se vea bien, para evitarlo se puede utilizar la propiedad max-width=100% en la hoja de estilo, de forma que la imagen nunca se agrandará más de su tamaño original. Por ejemplo:

<img src="graficos/en_rio_grande_800.jpg" style="max-width: 100%; height: auto;">

Los navegadores siguen resolviendo bien las etiquetas con valores de anchura y altura en porcentajes. Actualmente existen bastantes páginas web que siguen utilizando porcentajes en estos atributos.

Los atributos width y height se pueden establecer también con hojas de estilo. En general, cuando un atributo se puede manejar con hojas de estilo y desde la etiqueta HTML, siempre se recomienda hacerlo desde la hoja de estilos, para separar el contenido del formato, pero en este caso esta regla es discutible. Por ejemplo, si en nuestra página web hay muchas imágenes de diferentes tamaños tendríamos que declarar muchos estilos y el archivo de la hoja de estilos aumentaría mucho de tamaño y complejidad, en estos casos es mejor poner la anchura y altura directamente en la etiqueta html.

Hay otros casos donde sí tendrá sentido utilizar las hojas de estilo, por ejemplo, si tenemos muchas imágenes pero son todas del mismo tamaño y queremos darles un formato (por ejemplo, redondear las esquinas).

 


Enero-2019 (V 2.0)
Pág. 5.4
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.