CSS: tamaños porcentuales e imágenes
Basándonos en el post anterior , y aprovechando el uso de la propiedad overflow, vamos a hacer un pequeño juego con las imágenes.
A menudo nos encontramos con páginas de ancho porcentual, o cuya anchura varía entre dos resoluciones. En este tipo de páginas nos podemos encontrar con que las imágenes permanecen con un tamaño fijo descuadrando toda la página cuando reducimos su tamaño.
Propongo incluir las imágenes dentro de un div con una clase específica, algo como:
(<)div class="img-resize"(>)(<)img src="/imagen.jpg" border="0" (/>)(</)div(>)
Los paréntesis son para que no lo interprete como codigo.
Y en la CSS utilizar la propiedad overflow para "adaptar" el tamaño de la imagen:
.img-resize {
min-width:410px;
max-width:542px;
overflow:hidden;
}
Al no redimensionar la imagen tenemos un inconveniente muy grave: a resolución baja nos oculta parte de la imagen. Esto puede ser problemático si la imagen contiene información esencial. Si no es así, es una cuestión de apariencia en la que deberemos valorar a que resolución nos interesa mostrar la imagen correctamente.
Por si os sirve podéis ver un ejemplo básico , y otro más complejo. Lo dicho, espero que le sirva a alguien.
.