Redimensionado Proporcional

25/Ago/2008 544

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. www.iherb.com [#]

    Wow, amazing blog structure! How lengthy have you been blogging for?
    you made running a blog glance easy. The total glance of your web site is excellent, as neatly as
    the content!
    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  2. HenryUnfiP [#]

    gay dating spartanburg
    dating gay services
    give up on gay dating

  3. Carlblabs [#]

    over the counter sildenafil

  4. Judyblabs [#]

    buy viagra tablet online india

  5. zithromaxeska [#]

    zinthromax zithromax pill zitromax pfizer

  6. Felipe Homolka [#]

    zyprexa lopid atarax

  7. Samara Coppola [#]

    I truly love your website.. Very nice colors & theme.

    Did you develop this website yourself? Please reply back as I’m wanting
    to create my own website and want to know where you got this from or exactly what the theme is called.
    Cheers!

  8. Joseph Derrick [#]

    I have been browsing online more than three hours today, yet I never found any interesting
    article like yours. It’s pretty worth enough for me.
    Personally, if all site owners and bloggers made good content as you did, the net will be a lot more useful than ever before.

  9. Paul Pina [#]

    atarax nolvadex duricef

  10. cialis online [#]

    cheap cialis cialis pills

  11. stromectolforte.com [#]

    dosage ivermectin for humans http://stromectolforte.com/ ivermectin for humans for sale ivermektiini otc

  12. accutane coupon [#]

    buy isotretinoine isotretinoin side effects

  13. www.pharmaceptica.com [#]

    chloroquine phosphate cvs https://pharmaceptica.com/

  14. zyrtec coupon [#]

    cetirizine 5mg – https://allergyd.com

  15. pharmaceptica.com [#]

    tadalafil tablets ip https://www.pharmaceptica.com/

  16. modafinil200mg [#]

    modafinil moa modafinil dosage

  17. bactrim side effects [#]

    bactrim ds Trimethoprim side effects

  18. zyrtec side effects [#]

    allegra allergy – http://allergyd.com

  19. Rubenomina [#]

    sildenafil 100 mg side effects webmd sildenafil buy sildenafil online europe levitra duration of action cialis 3 day pill

  20. ivermetrix [#]

    what does ivermectin kill

    help nitric oxide republican

  21. isotretinoina [#]

    isotretinoine accutane side effects

  22. prednisonetaper [#]

    prednisone no prescription prednisone drops after cataract surgery

  23. isotretinoin [#]

    accutane ipledge isotretinoina

  24. BradleyHouff [#]

    amazon cialis generic generic viagra 100mg sildenafil 80 mg viagra virtual doctor visits claritin samples for healthcare professionals

  25. provigildrug [#]

    modafinil warnings https://modafilmdmodafinil.com/

  26. pharmaceptica [#]

    erectile function magnesium vitamin k https://pharmaceptica.com/

  27. bactrim dosage [#]

    bactrim sulfamethoxazole 800 mg trimethoprim

  28. provigilgeneric [#]

    buy modafinil reddit https://modafilmodafinil.com/

  29. bactrim ds side effects [#]

    smz tmp ds 800 160 tab amn bactrim side effects

  30. Anthonyliz [#]

    sildenafil 20 mg coupons grease the movie pink ladies cialis commercials viagra pills for sale taking 200 mg of viagra eli lilly cialis manufacturer coupon

  31. ivermectin dosing chart for people [#]

    ivermectin for swine orally

    time neuroleptic agents literary

  32. prednisonetablets [#]

    https://deltasoneprednisone.com/ what is prednisolone

  33. roaccutane side effects [#]

    accutane ipledge accutune

  34. Sueblabs [#]

    cialis over the counter australia

  35. bactrim antibiotic [#]

    side effects for sulfamethoxazole trimethoprim trimoxazole

  36. Keithtyday [#]

    sildenafil 20 mg long acting benzodiazepine cialis cost per pill buy viagra tablet free medication samples for professionals walgreens coupon policy 2018

  37. stromectolforte.com [#]

    ivermectin 3 mg tablet dosage http://stromectolforte.com/ ivermectin over the counter ivermectin without doctor prescription

  38. RodolfoSwece [#]

    40 viagra for 99.00 doctors that prescribe medicine online herbal tadalafil best otc viagra chewing viagra to work faster garden seed companies free shipping

  39. levitrahims.com [#]

    bank of america health savings account login http://levitrahims.com – levitra 20 mg cost walmart

  40. Samblabs [#]

    4467 cialis

  41. stromectol [#]

    Global Dope Here this product
    https://ivermectstromect.com stromectol
    https://stromectolivermect.com ivermectin 3 mg
    https://ivermectinstrom.com ivermectin over the counter
    https://ivermectinsts.com ivermectin 3 mg
    https://ivermectinst.com ivermectin for sale

  42. ivermectin new zealand [#]

    ivermectin dosage chart for humans http://stromectolforte.com/ stromectol ivermectin cream

  43. Joshuawag [#]

    drug interactions with flomax liquid viagra for men nutrigold omega 3 fish oil low cost cialis zyvox patient assistance application form 20mg cialis vs 100mg viagra effectiveness

  44. FritzPeerb [#]

    pde5 inhibitors over the counter all natural viagra ingredients women low libido remedies cialis 5 compare viagra prices in usa cialis action viagra in india

CSSLab