Redimensionado Proporcional

25/ago/2008 17

Con redimensionado proporcional, me refiero a que una imagen cualquiera, se redimensione dependiendo de la proporción de la resolución del monitor, sin que se deforme o pierda calidad en el proceso. La idea es que se haga al mismo tiempo en que la ventana del browser se mueva, sin tener que esperar que se adapte a la resolución del computador.

Este es otro de esos trucos CSS donde uno se hace esa dolorosa pregunta: "¿Por qué no se me había ocurrido antes?". Pero bueno, para qué lamentarse si se puede disfrutar de la solución.

SafariFirefoxInternet Explorer 7Internet Explorer 6Opera

Al grano entonces. Si se tiene una imagen bastante grande como para que actúe como una atractiva imagen que vaya a aportar al diseño y contenido del sitio, y no mermar la usabilidad y accesibilidad de la web con su gran peso y colores distractores, podemos aplicarla de fondo. Ahora, el problema surge que queremos ponerla para que a medida que se vaya redimensionando la ventana del browser, la imagen también se escale para adaptarse al soporte. Así no perdemos ningún pixel de ella y logramos ese objetivo con el diseño, lo que grafico a continuación:

Redimensionando Proporcionalmente - CSSLab.cl

Esto se lograba con Flash con un poco de habilidad en Actionscript y Stage.scaleMode. Pero con un poco de simple CSS podemos lograr lo mismo. A continuación, la explicación.

El HTML será una imagen que será insertada como etiqueta <img /> y no con background-image como se podrían imaginas. Luego, el contenido que mediante CSS será correctamente posicionado:

 <img src="fondo.jpg" class="imagen_fondo" alt="DigitalArt: Fractal Meeting" />
<h1>Fractal Meeting</h1>

Luego, la versatilidad del CSS. Posicionaremos la imagen absolutamente, indicando que el ancho sea al 100%. ¡Y eso es todo! Basta con un overflow: hidden al <body> u otro elemento contenedor que tengan para que no les forme scroll, y ya. No hay más:

body {
     overflow: hidden;
}
.imagen_fondo {
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
}
.titulo {
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
}

Ver ejemplo final

Muevan la ventana del browser para ver esta técnica en acción. Y para el código completo, basta con ver el código fuente del ejemplo anterior.

Links:

Comentarios

  1. byteheadx [#]

    Excelente…. y si, me acabo de hacer la pregunta…. 😛

    muchas gracias, como siempre encuentro en esta web muy buen material para aprender.

  2. Viewhunter [#]

    Uso una técnica bastante parecida en mi site para mostrar fotos y la verdad es que el resultado es muy efectivo.

  3. AdrianVP [#]

    Simple y Efectivo…. ¿Por qué no se me había ocurrido antes?

  4. vendrix [#]

    Muy buena entrada, gracias por el aporte.

  5. manuedit [#]

    bien, para tenerlo en cuenta

  6. Luciano Nicolás [#]

    ¡Genial!

    Ni te imaginás el tiempo que estuve buscando algo así. Y nunca se me ocurrió esto.

    ¡Saludos y Gracias!

    PD: Mi pequeña obra de Net.Art ya está haciendo uso de esta cosita. Espero no pecar de Spam. Para los interesados: http://www.familynotdead.com.ar

  7. Luciano Nicolás [#]

    Por cierto, en IE 6 y 7, el código genera que aparezca el scroll, tanto vertical como horizontal.

    Yo lo solucioné así:

    ¿Hay alguna solución más “elegante”, o que sea válida?

  8. IsaacDM [#]

    También vi un tutorial que decía como también teniendo una imagen grande, se podía especificar su ancho y alto en EMs así quedaría agradablemente en cualquier layOut, hasta uno liquido o elástico

    DTBM
    bao!

  9. fearlex [#]

    Mi pregunta es la siguiente: si esa imagen tiene que tener un posicionamiento absoluto, entonces, a partir de ahi, todo nuestro layout tiene que estar posicionado absolutamente, por encima de la imagen ?

    Eso no me quedo claro aunque me encanto ver que esto que por tanto tiempo solo se conseguia con Flash, sea posible en CSS, y sin Javascript, Muy bueno la verdad

  10. Jorge Epuñan [#]

    fearlex: la imagen es independiente del contenido; si la posicionas absolutamente y el contenido del sitio no esta dentro del elemento q posiciona la imagen, la puedes flotar y posicionar como gustes; total sera sola la imagen la q estara por detras del resto.

    espero haya quedado claro, salu2.

  11. Sebastian [#]

    Buenas como va!

    Excelente comentario, me podrias orientar sobre como hacer lo mismo pero quiero que la imagen sea background de una tabla o fila o celda ???
    Gracias!!

  12. Jorge Epuñan [#]

    Sebastian: no es posible, ya q para esta tecnica tienes q usar posicionamiento absoluto y si manejas tablas no seria posible.

    saludos.

  13. Mario [#]

    Justo andaba estudiando el tema gracias a unos amigos que me dejan usar su proyecto web como experimento. Para las casillas de una tabla simple fue suficiente especificar width:100% para la imagen, pero en mi caso era el único contenido de las casillas.
    CSSLab es muy interesante. Tengo un largo tiempo leyendo sobre CSS como aficionado, y por primera vez encuentro un sitio en español que trata el CSS con la misma calidad que A List Apart, MaxDesign y otros.

    Saludos desde Lima, Perú.

  14. montaje [#]

    no funciona en Internet explore 6
    pues la imagen no se redimensiona a lo largo, también sale scroll tanto en Internet 5 como en 6

  15. rodrigo [#]

    muy buen aporte!
    como hago para qe aparezca la imagen centrada en la pantalla? se puede?

  16. Jorge Epuñan [#]

    rodrigo: claro q se puede, estamos posicionando absolutamente asi q puedes jugar con porcentajes para el top y el left por ej:
    .imagen_fondo {
    left:25%;
    position:absolute;
    top:15%;
    width:50%;
    }

    Suerte!

  17. Max [#]

    Gracias me has ayudado enormemente

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab