Dnevnik eklektika - Piše Dragan Babić

Max-width image oveflow fix

Da li ste imali problem koji nastaje kada vam je stranica donekle optimizovana za 800x600, ali u tekstu imate par slika koje bi sa svojim dimenzijama pri prelasku na 800x600 “probile” svoj parent element i time upropastila layout?

E pa ja jesam, i evo rešenja.

Pošto volimo da stvari ostanu onakve kakve smo ih napravili (pa i na 800x600 ), koristimo sledeću CSS osobinu: img{ max-width:100%; } Što će reći da svaka slika može (ključna reč) maksimalno da se “rastegne” do pune širine svog parent diva. Što će reći — sve je normalno dok slika ne postane prevelika za svoj parent element. Kada ne može više da stane u njega, njena širina se menja (a proporcionalno i visina) na 100% širine parent elementa. Super! Evo i primera.

Ukoliko nećete svim slikama da date ovu osobinu — na primer samo jedan deo stranice vam je fluidan i u njemu bi moglo doći da problema na 800x600 dajte ovaj rule: #id-tvog-diva img{ max-width:100%; }

Ovaj rule primenjuje max-width na svaki img koji je u divu #id-tvog-diva.

Veoma jednostavno, ali IE to ne razume.

Da je rešenje sa min-width ne bi bilo problema — jer u suštini IE tretira i width i height kao min-width i min-height, ali za max-width moramo koristiti IE-ove expressions. (da li je neko ovo preveo smisleno na srpski?)

width:expression(document.body.clientWidth > 800? "auto": "100%" );

CSS gore primenjuje i na IE naš željeni max-width property, a radi na sledeći način. Bla bla bla, proverava da li je veličina bodyja veća od 800px, ako jeste — primenjuje width:auto, a ako je manji od 800px primenjuje width:100%.

Ovaj kod radi samo u IE 5.5 i 6 i na Windows mašinama sa SP2 će da pravi problem sa blokiranjem aktivnog sadržaja.

Na kraju mogao bih pomenuti da ovaj kod ne mora biti primenjen samo na sliku, već na bilo koji drugi element koji je potencijalni problem.

• « Pripreme za novembarski CSS reboot
• Google blogsearch »

Nema komentara 0

Komentariši unos “Max-width image oveflow fix”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.