CSS - Slike čija veličina varira u odnosu na veličinu teksta
Nisam želeo da se pritom menja sama veličina slike zbog velike verovatnoće pogoršane pikselacije slike, već da deo slike ne bude vidljiv kada je veličina teksta podešena na primer na srednju vrednost a da se sa povećanjem veličine teksta taj sakriveni deo srazmerno otkrije i na taj način dobije veća slika.
Da bih ovo postigao koristio sam veće slike i postavljao ih u div-ove čija je veličina određena em-ovima.
Kako se povećavala veličina teksta tako se povećavala i veličina em-om određenog diva, otkrivajući pri tome sve veći deo slike. Izazov je bio da se slika učini dobrog izgleda kada se poveća proporcija njene otkrivenosti.
Prvi metod. – koristi sliku iz pozadine. Osnovni nedostatak ovog metoda je da nikako nisam uspevao da sliku postavim u sredinu div-a. Što je značilo da kada div poveća svoju veličinu slika više nije postavljena u njegovom središnjem delu.
Evo HTML koda: <div class="povecaj"></div>
I CSS kod: .povecaj {
Drugi metod – postavlja sliku unutar div-a u HTML-u. Na ovaj način moguće je postaviti sliku pozicioniranu u sredini diva-a. Evo HTML-a: <div class="povecaj2"><img src="slika.jpg" alt="" /></div>
I CSS-a: .povecaj2 img {
Ne znam koliko će vam od koristi biti ova tehnika, ali je svakako bilo zabavno napraviti je.
|
Teme bloga:
Najčitaniji postovi:
Blog - Naslovna stranica
|
|