Cuando aprendemos a escribir lenguaje HTML para crear nuestras páginas web aguantaremos poco creando páginas web con solo texto y estaremos deseosos de insertarle alguna imagen para darlas colorido.
El elemento HTML que nos permite poner imágenes en nuestra página web es img. La línea de código que necesitaríamos sería la siguiente:
<img src="mifoto.jpg" />
Vemos que el atributo src permite indicar el nombre de la imagen que queramos cargar. Este nombre puede ser directamente el de la imagen o bien una ruta relativa o absoluta más el nombre de la imagen.
Por defecto, el tamaño de la imagen que carga es su tamaño original.
Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.
Así, si queremos poner la imagen a 100×100 pixels, la línea de código quedaría de la siguiente forma:
<img src="mifoto.jpg" width="100" height="100" />
De esta forma tan sencilla hemos podido definir el alto y ancho de una imagen con HTML utilizando los atributos del elemento img. Ahora un reto, ¿sabrías como puedes conseguir lo mismo pero haciendo uso del lenguaje CSS? ¿Son válidas las dos alternativas cuando queremos manejar el alto y el ancho o solo una es la correcta? Te lo contamos en el artículo Definir el tamaño de una imagen con CSS.
