Las dimensiones de las imágenes en el Html

En ocasiones quizás hayas visitado una web y nada mas intentar entrar ves parte de la web, algo desmoronada o desordenada y, conforme se van cargando imágenes la web va tomando forma. Te ha ocurrido? No es nada grave a no ser que una de las imágenes tenga la ruta mal escrita (como hemos visto antes) en cuyo caso el desmorone o desorden se mantendrá en la web.

Esto ocurre porque el navegador no sabe cuánto ocupa la imagen (cuál es su altura y anchura) hasta que la carga y, si no consigue cargarla, no sabe lo que ocupa, claro. Para evitar esto y porque además es la forma correcta de escribir el código Html, hay que definir la altura y anchura de las imágenes en esa línea de código que os comentaba páginas atrás. Vamos a ver cómo se hace.

Definir la anchura de una imagen

Para definir la anchura de la imagen en su línea de código Html basta con colocar esto:

width="111px"

El término width significa anchura en inglés. Original, verdad? y la cifra que he puesto de ejemplo, el 111 es la anchura expresada en pixeles. Después se colocan las letras px que significa "pixeles" y listo. No olvides encerrar todo entre dobles comillas " " pues es el modo correcto de hacerlo.

Definir la altura de las imágenes

Del mismo modo, para definir la altura de la imagen en su línea de código Html hay con colocar esto otro:

height="222px"

Donde height significa altura en inglés. La cifra que he puesto de ejemplo, el 222 será la anchura expresada en pixeles. Después se escriben las letras px que significa "pixeles" y terminado.

Para saber cuáles son las dimensiones de la imagen que vas a colocar, ve a la carpeta donde la tienes guardada y pulsando sobre su archivo con el botón derecho del ratón pulsa en "Información", "Propiedades" o algo así (depende de tu sistema operativo) y te aparecerán. En ocasiones con solo colocar el puntero del ratón sobre el archivo y esperando un poco aparece un mensajito al lado indicándo estas dimensiones, entre otras cosas.

Es buena idea no dejar ningún espacio en blanco dentro de las comillas que contienen la cifra y las unidades. Por ejemplo, podrías tener problemas escribiendo "222 px", " 222 px ", " 222px", etc. La forma correcta es sin espacios en blanco dentro de las dobles comillas, así "222px".

Si no colocas las comillas sino solo el valor sin ellas (el Htmlo5 permite usar comillas o no utilizarlas, pero yo te recomiendo MUCHO que sí las uses siempre) tendrías fallos si dejas espacios en blanco entre el signo igual y la cifra, o entre la cifra y las unidades. Estaría mal por tanto escribir width=222 px, o width= 222px. La manera correcta sería width=222px, pero como te digo, lo mejor es usar las dobles comillas y escribirlo así: width="222px".