Diskuse JPW: Proporcionální škálování obrázků

	Autor	Zpráva
	nadsenec Profil *	#1 · Zasláno: 3. 12. 2015, 16:08:15 Odpovědět Citovat 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	#2 · Zasláno: 3. 12. 2015, 16:41:21 · Upravil/a: Maestro o 3 minuty později Odpovědět Citovat 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 *	#3 · Zasláno: 3. 12. 2015, 17:53:17 Odpovědět Citovat 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 *	#4 · Zasláno: 3. 12. 2015, 18:14:30 Odpovědět Citovat nadsenec: „proporcionálně ve stejné velikosti“ Definuj rozměry procentuálně. Pozadí nech potom přizpůsobit rozměrům (background-size).
	nadsenec Profil *	#5 · Zasláno: 3. 12. 2015, 21:31:43 Odpovědět Citovat 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 *	#6 · Zasláno: 3. 12. 2015, 21:55:29 Odpovědět Citovat 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 *	#7 · Zasláno: 4. 12. 2015, 07:38:53 Odpovědět Citovat 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	#8 · Zasláno: 4. 12. 2015, 08:03:36 Odpovědět Citovat Výška závislá na šířce
	nadsenec Profil *	#9 · Zasláno: 4. 12. 2015, 11:23:15 Odpovědět Citovat Str4wberry: Skvělé! Pochopil jsem, nasadil, funkční. Děkuji mockrát vám oběma.
		Časová prodleva: 9 let

Vaše odpověď

Mohlo by se hodit