Ejercicios con imágenes






Mapa de imagen

Huesca Teruel Zaragoza

Pincha en las diferentes provincias para pasar a la página de la provincia en cuestión






Redimensionado de imágenes según la anchura de la ventana

Al cambiar la anchura de la ventana se ajusta el tamaño de la imagen de forma automática, en el ejemplo se usan imágenes diferentes para ver mejor el efecto, pero puede usarse una misma imagen a diferentes resoluciones.

Vehículos a motor





Proporción de pantalla usada por una imagen

El atributo "sizes" se emplea para determinar el porcentaje del ancho de pantalla que ocupa la imagen, por ejemplo en una pantalla pequeña suele interesar que la imagen ocupe todo el ancho y en una pantalla más grande solo un porcentaje determinado de ella.

En este ejemplo si el ancho del navegador es mayor de 900 pixeles la imagen ocupará el 25%, si es entre 675 y 900 el 50%, si es entre 450 y 675 el 75% y si es menor de 450 el 100%.

Noche estrellada





Imágenes vectoriales

En este ejercicio se usa un gráfico vectorial (svg) que tiene la ventaja de que se puede escalar sin perdida de calidad.

Arboles
Arboles
Arboles
Arboles
Arboles
Arboles
Arboles





Volver a la página de inicio