Autor Zpráva
nadsenec
Profil *
Ahoj,

snažím se docílit tohoto efektu u výpisu aktuálních článků na main webu...

www.hokej-litvinov.cz/index.asp?cover=nikdy

...tedy škálování obrázků tak, aby ten hlavní a oba vedlejší zůstávaly proporcionální stejné i při resizování okna. Tzn. aby všechny ty divy s články (id = "topstory") zůstávaly pořád stejně vysoké (tady 400px) i když změnšuju fluidně viewport, ale absolutně netuším, jak na to.

Poradíte někdo nebo nakopnete správným směrem, prosím?

Díky!
Maestro
Profil
Zdravím, stačí fotku zabaliť do divu a pridať vlastnosť overflow: hidden na daný element. Pre istotu, si pozri aj ukážku a vysvetlenie vlastnosti overflow.
nadsenec
Profil *
Já to asi blbě popsal - nejde mi o ten hover efekt, ten umím, ale o to, aby při fludiním gridu a resizování okna prohlížeče zůstaly obrázky proporcionálně ve stejné velikosti. Nevím, jak to lépe popsat...
Martin2
Profil *
nadsenec:
proporcionálně ve stejné velikosti
Definuj rozměry procentuálně. Pozadí nech potom přizpůsobit rozměrům (background-size).
nadsenec
Profil *
Martin2:
Šířku v procentech definovanou mám, tam je mi to jasné, ale u té výšky absolutně nevím, jak to uchopit. Background-size taky nevím, jak bych použil, protože ty obrázky tahám pomocí PHP z databáze. Nakopneš mě, prosím?
Martin2
Profil *
Pokud chceš výšku definovat poměrně k šířce, tak se to většinou dělá procentuálním paddingem. Background-size určuje velikost obrázku pozadí – lze taky procenty, nebo jako cover/contain. Je to popsáno v dokumentaci.
nadsenec
Profil *
Přesně tak, zachovat poměr výšky a šířky i při resizování. Moc děkuju, že se mě snažíš nakopnout, ale neměl bys nějaký praktický příklad, prosím?
Str4wberry
Profil
Výška závislá na šířce
nadsenec
Profil *
Str4wberry:
Skvělé! Pochopil jsem, nasadil, funkční. Děkuji mockrát vám oběma.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: