Obrázek s výškou v procentech – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
HoBi
~ Anonymní uživatel
9 příspěvků
7. 2. 2014   #1
-
0
-

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! :)

Nahlásit jako SPAM
IP: 92.240.191.–
Reklama
Reklama
Flu0
Návštěvník
7. 2. 2014   #2
-
0
-

#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.

Nahlásit jako SPAM
IP: 93.157.132.–
HoBi
~ Anonymní uživatel
9 příspěvků
7. 2. 2014   #3
-
0
-

#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 :)

Nahlásit jako SPAM
IP: 92.240.191.–
Flu0
Návštěvník
7. 2. 2014   #4
-
0
-

#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.

Nahlásit jako SPAM
IP: 93.157.132.–
HoBi
~ Anonymní uživatel
9 příspěvků
7. 2. 2014   #5
-
0
-

#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...

Nahlásit jako SPAM
IP: 92.240.191.–
Flu0
Návštěvník
7. 2. 2014   #6
-
0
-

#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.

Nahlásit jako SPAM
IP: 93.157.132.–
HoBi
~ Anonymní uživatel
9 příspěvků
7. 2. 2014   #7
-
0
-

#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

Nahlásit jako SPAM
IP: 92.240.191.–
Flu0
Návštěvník
7. 2. 2014   #8
-
+1
-
Zajímavé

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

Nahlásit jako SPAM
IP: 93.157.132.–
HoBi0
Duch
7. 2. 2014   #9
-
0
-

#8 Flu
Super... :)

Nahlásit jako SPAM
IP: 92.240.191.–
Flu0
Návštěvník
7. 2. 2014   #10
-
0
-

#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.

Nahlásit jako SPAM
IP: 77.48.21.–
HoBi0
Duch
7. 2. 2014   #11
-
0
-

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

Nahlásit jako SPAM
IP: 92.240.191.–
Flu0
Návštěvník
7. 2. 2014   #12
-
0
-

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

Nahlásit jako SPAM
IP: 77.48.21.–
HoBi0
Duch
7. 2. 2014   #13
-
0
-

#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ď... :/

Nahlásit jako SPAM
IP: 92.240.191.–
Flu0
Návštěvník
7. 2. 2014   #14
-
0
-

#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.

Nahlásit jako SPAM
IP: 77.48.21.–
HoBi0
Duch
7. 2. 2014   #15
-
0
-

#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 ;)

Nahlásit jako SPAM
IP: 92.240.191.–
HoBi
~ Anonymní uživatel
9 příspěvků
8. 2. 2014   #16
-
0
-

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]

Nahlásit jako SPAM
IP: 92.240.191.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý