Obrázek s výškou v procentech – CSS – Fórum – Programujte.com

Mám problém při tvorbě horizontální obrázkové "galerie". Mám nastavenou výšku na 100% a výšku rodičovského elementu na 70%, celé je to vertikálně centrované.

Můj problém je že rodičovský element se nezmenšuje podle obrázku (když měníte výšku okna), ale zůstává mu originální šířka.

Potřebuji toto: rodičovský obrázek bude mít výšku 70%, bude centrovaný a obrázky v něm se budou automaticky zmenšovat při změně výšky okna - podle poměru jednotlivých obrázků.

Mělo by to býti pomocí CSS, jelikož takováto základní funkce by měla běžet i bez JS.

Můj problém můžete zobrazit na http://helpimage.honzabittner.cz/

Díky moc za pomoc! :)

#1 HoBi
Div nemá nic jako poměr stran, zmenšením výšky proto měníš opravdu jen výšku. U obrázků se ti změní i šířka, protože ty poměr stran mají.

Jestli správně chápu, výsledek má být, že se ti text vedle obrázku bude posouvat podle toho, jak se bude zmenšovat šírka obrázku. V tom případě stačí smazat div s červenou na pozadí a použít samotný obrázek.

#2 Flu
div .p-one smazat nemohu, ten je důležitý, jelikož pak tam budou i jiné... p-two či p-three, které budou dávat více obrázků pod sebe.

Btw. pokud nechám obrázek bez .p-one, tak se mi u obrázku šířka nemění a jen se deformuje na výšku.

Kdyžtak si to můžeš zkusit v chrome devtools :)

#3 HoBi
Hmm zajímavá novinka na seznam "chovám se hrozně" pro chrome :) U Firefoxu to šlape dobře. A mám to... img musí mít display: block.

A mají ty divy p-one, p-two jiný účel než jen být obalem obrázku? V dnešní době se s img dá pracovat stejně dobře jako s divem.

Jinak asi budeš muset šáhnout po nějakém JS.

#4 Flu
Ty .p-one, .p-two etc. mají význam pro stylování velikostí a rozložení img. V p-one je rozložení vedle sebe při 100% height a p-two pod sebe, každý výšku 50%...

Zkouším to ve FF, ale mě to tedy nefunguje...

#5 HoBi
Jsem v práci takže se nemůžu tak moc vykecávat. Asi možná spíš úplně nechápu, jak to má vypadat. Jestli máš chuť, udělej mi někde třeba nějakou stránku mimo, kde budou všechny ty obrázky. Já na to pak večer mrknu... nebo to rovnou vyřeš přes JS.

#6 Flu
Jasně, udělám to tedy i s těmi p-two atp... Pak to nahraji na ten samý web.
 

Tak se tedy večer koukni, snad tě něco napadne... :P

#7 HoBi
Nějaký řešení určitě najdem, už sem v práci řešila i horší věci   

#8 Flu
Super... :)

#9 HoBi
No tak se tak úplně nepovedlo, všechny nápady skončili špatně, takže to vidim leda na JS.

Jediný css řešení je vyhodit ty divy a mít tam jen obrázky vedle sebe.

#10 Flu
Nu, a šlo ti to udělat bez těch divů nějak? Protože ani to mi nešlo...
 

#11 HoBi
Mě to šlo bez problémů, čiště jen odmazáním divů, bez nějakých dalších úprav.

#12 Flu
Divné, ale to mi dělá úplně to samé :P

Dostal jsem se tedy zatím nejdál jen že mi to drží šířku a deformuje výšku, jako je na webu ukázáno teď... :/

#13 HoBi
Tak já už vážně nevim, mě to bez těch divů vážně funguje.  Viz. screen http://prntscr.com/2qduv4 ty první dva jsou bez divu, další jsou s ním žlluté a tam je vidět, že je to screen po zmenšení obrazovky.

#14 Flu
Udělal jsem to stejně a koukám že to funguje, ale jen ve FF. V chromu mi to dělá zas něco jiného... -_-

Asi bude lepší když se kouknu, jak mají dělanou nějakou vertikálně centrovanou galerii někde jinde ;)

Takto to má vypadat...

http://prntscr.com/2qkoj8

Bohužel se mi buď obrázky nezmenšují v poměru, nebo rodičovský element zachovává originální šířku.

Nemá někdo nápad jak to vyřešit, případně odkaz na stránku kde to takto mají?  [:P]