JCMartínez – Diseño y Desarrollo web
Proyectos realizados Artículos y noticias Enlaces de interés

Imágenes adaptables al tamaño de ventana del navegador

Imágenes adaptables al tamaño de ventana del navegador

Fecha: 28/06/2011 - Pertenece a la categoría  Maquetación y Desarrollo

Imágenes adaptablesComenzamos con el primer ejercicio práctico en la web. En determinadas ocasiones, sobre todo en diseños web líquidos, tenemos el problema de que nuestras imágenes no se adaptan a la resolución de la ventana del usuario, ocasionando que en grandes resoluciones las imágenes se queden pequeñas respecto al contenido, y no conservando las proporciones originales de los elementos de la web.

Con CSS podemos crear un efecto sencillo para adaptar las imágenes al contenido sin distorsionarlas. Para lograr dicho efecto sólo necesitamos una capa que contendrá nuestra imagen, y aplicar ciertos estilos:

CSS:

1
2
3
4
5
6

.capa_imagen{
    float:left;
    margin:0px 30px 30px 0px;
    width:50%;
    overflow:hidden;
}

HTML:

1
2
3
4
5
6
7

<html>
<body>
    <div class="capa_imagen">
        <img src="nombre_de_imagen.jpg" alt="" />
    </div>
</body>
</html>

En el siguiente ejemplo, veréis cómo la imagen se adapta de forma horizontal a la resolución de la ventana aunque la redimensionemos:

Ver ejemplo 1

Lo que estamos haciendo es que con el atributo “overflow:hidden;” ocultamos el 50% de nuestra imagen, ya que “capa_imagen” se está redimensionando al 50% de la anchura de la ventana.

Por ahora, la imagen sólo se adapta de forma horizontal. Para que la capa se adapte también en vertical, tenemos que aplicar el atributo “height:100%” a “body” y “html”, y una altura a nuestra “capa_imagen” de un tamaño porcentual a gusto del consumidor.

Por otro lado, si “capa_imagen” supera el ancho máximo de la imagen ésta sigue creciendo, desplazando el texto hacia la derecha. Para que la capa no supere el tamaño de la imagen, añadimos a la capa como tamaño máximo de altura/anchura los de la imagen. Así crecerá sólo hasta los límites de la misma.

CSS:

1
2
3
4
5
6
7
8
9
10
11
12

html,body{
    height:100%;
}
.capa_imagen{
    float:left;
    margin:0px 30px 30px 0px;
    width:50%;
    overflow:hidden;
    height:75%;
    max-width:750px;
    max-height:450px;
}

Ver ejemplo 2

Si necesitáis que “capa_imagen” esté contenida dentro de otras capas padre, éstas también deben tener el atributo “height:100%”.