HTML-CSS řešení proporcí obrázků

18. 4. 2012 19:27:42

Zdravím vás,

technicky html není programování, ale nenašel jsem lepší místo kam to hodit, což mě docela zaskočilo – pokud lepší místo existuje příjměte mou omluvu.

No a teď k věci :)) Na hudebním serveru futurehits.cz mám vlastní CMS. Při vytváření článků se nahrávají obrázky, které se pak zobrazují ve výpisech hudebních článků.

Problém je v tom, že CMS s obrázky nijak nepracuje (nezmenšuje, neupravuje atd.), proto, když se tam vypíšou jen zmenšené přes css "natvrdo", jsou neproporcionální. Chci to vyřešit tak, abych nemusel upravovat proporce ručně, než obrázky nahraji.

Chtěl jsem to vyřešit přes CSS a Owerflow: hidden, což taky funguje dobře, problém nastává s kulatými rohy. Když dám border-radius na blok ve kterém je obrázek, rohy se neoříznou, když je dám na obrázek, zůstane ořízlá jen levá horní hrana.

A teď bych vás chtěl poprosit o rady a tipy. Znáte nějáký jednoduchý způsob přes css jak to vyřešit? případně nějáký opravdu jednoduchý JS? S nimi si moc nerozumím.... Díky moc za tipy, rady, cokoliv… :)

18. 4. 2012 19:27:42

https://webtrh.cz/diskuse/html-css-reseni-proporci-obrazku#reply755806

Smazaný účet m5u2DKRief

(48 hodnocení)

18. 4. 2012 20:07:13

Zápis jednoho (žádaného) rozměru do HTML k obrázku by problém nevyřešilo?

18. 4. 2012 20:07:13

https://webtrh.cz/diskuse/html-css-reseni-proporci-obrazku#reply755805

(20 hodnocení)

18. 4. 2012 20:10:04

ja mam takovy pocit ze zamek chce obrazek oriznout, uprimne me efektivni a skuetcne fcni reseni asi napada jen v jquery a to bych zrovna moc nedoporucoval, nebude lepsi dat par chechtaku programatorovi at upravi upload aby se obrazky upravily pri nem?

18. 4. 2012 20:10:04

https://webtrh.cz/diskuse/html-css-reseni-proporci-obrazku#reply755804

smrtka

(3 hodnocení)

18. 4. 2012 20:14:25

souhlas s myslenkou OV i kdyz bych to napsal jinak : pokud nastavite obrazku jen jednu z hodnot, dopocita se ta druha podle pomeru stran automaticky. Takze v JS bych si zjistil pomer stran. Pak spocital, jestli se to vleze akorat na vysku nebo sirku a podle toho upravil jeden rozmer obrazku. Druhy rozmer presahne - cely img zabalit do divu a tomu nastavit pevnou velikost s okrajem a overflow hidden

18. 4. 2012 20:14:25

https://webtrh.cz/diskuse/html-css-reseni-proporci-obrazku#reply755803

Roman Zámečník

(11 hodnocení)

18. 4. 2012 20:31:53

Díky za odpověďi.

Zápis jednoho (žádaného) rozměru do HTML k obrázku by problém nevyřešilo?

Dala by se nastavit výška na pevno a šířka by se přizpůsobila, ale podle mě to vypadá ještě hůř, něž když je to neproporcionální :(

ja mam takovy pocit ze zamek chce obrazek oriznout, uprimne me efektivni a skuetcne fcni reseni asi napada jen v jquery a to bych zrovna moc nedoporucoval, nebude lepsi dat par chechtaku programatorovi at upravi upload aby se obrazky upravily pri nem?

Nejspíš to tak budu muset udělat :/ i kldyž se mi nechce investovat další peníze :D

souhlas s myslenkou OV i kdyz bych to napsal jinak : pokud nastavite obrazku jen jednu z hodnot, dopocita se ta druha podle pomeru stran automaticky. Takze v JS bych si zjistil pomer stran. Pak spocital, jestli se to vleze akorat na vysku nebo sirku a podle toho upravil jeden rozmer obrazku. Druhy rozmer presahne - cely img zabalit do divu a tomu nastavit pevnou velikost s okrajem a overflow hidden

Podobně jsem se to snažil řešit, jen jsem nevyužíval JS, jenže pak nefungují oblé rohy. :(

Tak to tak vypadá, že nějaké opravdu jednoduché řešení (s kterým bych byl spokojen) neexistuje. :D Mám to ale smůlu. :(

18. 4. 2012 20:31:53

https://webtrh.cz/diskuse/html-css-reseni-proporci-obrazku#reply755802

Smazaný účet m5u2DKRief

(48 hodnocení)

18. 4. 2012 20:38:17

Napsal zamek;786021
Dala by se nastavit výška na pevno a šířka by se přizpůsobila, ale podle mě to vypadá ještě hůř, něž když je to neproporcionální :(

Takže potřebujete spíš oříznutí, než zmenšení. V takovém případě by bylo asi úplně nejjednodušší a i do budoucna více efektivní takovou funkci do CMS přidat. Zcela jistě by se našlo i řešení pomocí JS, ale to mi v tomto případě přijde jako zbytečná opičárna.

18. 4. 2012 20:38:17

https://webtrh.cz/diskuse/html-css-reseni-proporci-obrazku#reply755801

netbrana

(14 hodnocení)

18. 4. 2012 20:44:37

Napsal zamek;786003
Zdravím vás,

technicky html není programování, ale nenašel jsem lepší místo kam to hodit, což mě docela zaskočilo – pokud lepší místo existuje příjměte mou omluvu.

No a teď k věci :)) Na hudebním serveru futurehits.cz mám vlastní CMS. Při vytváření článků se nahrávají obrázky, které se pak zobrazují ve výpisech hudebních článků.

Problém je v tom, že CMS s obrázky nijak nepracuje (nezmenšuje, neupravuje atd.), proto, když se tam vypíšou jen zmenšené přes css "natvrdo", jsou neproporcionální. Chci to vyřešit tak, abych nemusel upravovat proporce ručně, než obrázky nahraji.

Chtěl jsem to vyřešit přes CSS a Owerflow: hidden, což taky funguje dobře, problém nastává s kulatými rohy. Když dám border-radius na blok ve kterém je obrázek, rohy se neoříznou, když je dám na obrázek, zůstane ořízlá jen levá horní hrana.

A teď bych vás chtěl poprosit o rady a tipy. Znáte nějáký jednoduchý způsob přes css jak to vyřešit? případně nějáký opravdu jednoduchý JS? S nimi si moc nerozumím.... Díky moc za tipy, rady, cokoliv… :)

timthumb, měl by mít už i vyřešenou bezpečnostní díru, přes kterou docházelo k zavirování webů.

18. 4. 2012 20:44:37

https://webtrh.cz/diskuse/html-css-reseni-proporci-obrazku#reply755800

smrtka

(3 hodnocení)

18. 4. 2012 20:45:00

Kdyz mate vlastni CMS tak to Vam brani udelat si php skript na orez obrazku v konkretni slozce?

koukam, ze opravdu radius nedokaze uriznout obrazek v obsahu, pritom mnohem tezsi stinovani pod ho kopiruje... no zase jsem o neco chytrejsi :)

18. 4. 2012 20:45:00

https://webtrh.cz/diskuse/html-css-reseni-proporci-obrazku#reply755799

Marek Lenárd

(3 hodnocení)