Ancho de una imagen en HTML
Por defecto, las imágenes se muestran con su
tamaño real. Por ejemplo, esa imagen
con el emoticono que mostramos arriba, tiene
un tamaño real de 130 por 130
píxeles y ese mismo tamaño de imagen es el que
vemos en el navegador.
Si se desea, se puede cambiar el tamaño de la imagen,
estableciendo su ancho. Esto se hace con el atributo
width.
Pongamos como ejemplo establecer para nuestra imagen
un ancho de 100 píxeles. Para ello, como valor
del atributo width indicaremos el número 100,
así:
width="100"
¿De qué tamaño será la imagen en la pantalla?
Uno podría pensar que el siguiente: ancho de 100
píxeles, como hemos establecido, y la altura real
de 130, ya que no la hemos establecido. En
realidad, no será así.
El ancho realmente será de 100 píxeles,
pero la altura se ajustará para que las proporciones
de la imagen no se distorsionen, es decir, también se convertirá en
100 píxeles.
Ejecutemos y comprobemos esto:
<img src="smile.png" width="100">
:
Establezca para su imagen un ancho de 300
píxeles.
