Paralax image crop image

Petr Gargulák

(12 hodnocení)

5. 2. 2018 09:49:57

Dobrý den,

mám takový problém na této stránce v referencích Reference

Jeden obrázek v pozadí se mi zoomuje , cropuje na větší velikost než je.

Co s tím ?

5. 2. 2018 09:49:57

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327870

Shopines

(32 hodnocení)

5. 2. 2018 12:52:41

vsechny background: cover vymazte a dejte tam jen background-size: auto 100%;

5. 2. 2018 12:52:41

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327869

Petr Gargulák

(12 hodnocení)

5. 2. 2018 13:31:45

Napsal Shopines;1442080
vsechny background: cover vymazte a dejte tam jen background-size: auto 100%;

žádná změna je to stejné jako cover. jedině , když dám auto tak se zobrazí celý, ale zase to neskroluje.

---------- Příspěvek doplněn 05.02.2018 v 13:43 ----------

můžu procentuálně zmenšovat, ale pak to nescroluje jak by mělo....

---------- Příspěvek doplněn 05.02.2018 v 13:48 ----------

Tady je jak na to..projel jsem, už celý internet

https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

---------- Příspěvek doplněn 05.02.2018 v 13:50 ----------

Co ten obrázek zmenšit ?

5. 2. 2018 13:31:45

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327868

Shopines

(32 hodnocení)

5. 2. 2018 13:56:24

ten scroll co chcete, se dela jinak... musite mit ten obrazek na vysku vetsi a ne takhle uzky, je pak jasne, ze se vam to roztahne

5. 2. 2018 13:56:24

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327867

Michal Jeřábek

5. 2. 2018 13:58:43

Podle mě se snažíte udělat něco, co je logicky nemožné. Pokud to má paralaxovat tak, že se to nehne z místa, tak se ten obrázek nevyhnutelně musí roztáhnout tak, aby byl minimálně přes celé okno prohlížeče a nebo to pozadí musí na sebe vertikálně navazovat (a pak je potřeba ho nastavit na backround-repeat: repeat-y;).

5. 2. 2018 13:58:43

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327866

Petr Gargulák

(12 hodnocení)

5. 2. 2018 13:58:48

Napsal Shopines;1442112
jeste tohle musite vyhodit... background-attachment: fixed;
pak to normalne pujde, zkousel jsem to

Ale já potřebuju , aby scrolloval.... to je efekt paralax image.

---------- Příspěvek doplněn 05.02.2018 v 14:01 ----------

Napsal mjerabek;1442115
Podle mě se snažíte udělat něco, co je logicky nemožné. Pokud to má paralaxovat tak, že se to nehne z místa, tak se ten obrázek nevyhnutelně musí roztáhnout tak, aby byl minimálně přes celé okno prohlížeče a nebo to pozadí musí na sebe vertikálně navazovat (a pak je potřeba ho nastavit na backround-repeat: repeat-y;).

Tady to funguje, roztáhne se celý obrázek---a mně to obrázek ořízne.

https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

5. 2. 2018 13:58:48

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327865

Michal Jeřábek

5. 2. 2018 14:04:00

Jak ořízne? Ořízne se to na stranách, protože ten obrázek má takový poměr stran, že když se nastaví výška na celou výšku okna, tak ty okraje (levý a pravý) přesahují šířku okna prohlížeče.

5. 2. 2018 14:04:00

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327864

Shopines

(32 hodnocení)

5. 2. 2018 14:07:02

ten obrazek udelejte bez tech uvozovek velikost 1920x1080

ty uvozovky musite udelat absolutni pozici zvlast, pak docilite toho, co potrebujete...

5. 2. 2018 14:07:02

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327863

Petr Gargulák

(12 hodnocení)

5. 2. 2018 14:07:10

Napsal mjerabek;1442119
Jak ořízne? Ořízne se to na stranách protože ten obrázek má takový poměr stran, že když se nastaví výška na celou výšku okna, tak ty okraje (levý a pravý) přesahují šířku okna prohlížeče.

Celková velikost obrázku je 1920 * 395, ale obrázek to neroztáhne celý, podívejte se do průzkumníka jak má ten obrázek vypadat. Přes dva monitory se mi roztahuje..dva 1920.

---------- Příspěvek doplněn 05.02.2018 v 14:08 ----------

Napsal Shopines;1442121
ten obrazek udelejte bez tech uvozovek velikost 1920x1080
ty uvozovky musite udelat absolutni pozici zvlast, pak docilite toho, co potrebujete...

Jo to sem měl v plánu. To udělám. Ten obrázek má velikost 1920 * 395

5. 2. 2018 14:07:10

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327862

Shopines

(32 hodnocení)

5. 2. 2018 14:09:56

Spis bych resil chovani obrazku v tom slideru, nez nic nerikajici pozadi v parallaxu :D

5. 2. 2018 14:09:56

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327861

Michal Jeřábek

5. 2. 2018 14:11:55

Protože výška obrázku není 395, ale třeba 1000 (podle velikosti okna), tak šířka obrázku je 4860 a proto se roztahuje i na dva monitory.

V zásadě máte dvě možnosti:

background-size: contain;, což způsobí to, že se obrázek přizpůsobí velikosti okna, takže výška bude moc malá.

background-size: 100% 100%;, což se vám roztáhne přes celé okno při jakékoliv velikosti, ale obrázek ztratí původní poměr stran.

5. 2. 2018 14:11:55

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327860

Petr Gargulák

(12 hodnocení)

5. 2. 2018 14:12:39

Napsal Shopines;1442126
Spis bych resil chovani obrazku v tom slideru, nez nic nerikajici pozadi v parallaxu :D

Jak se chovají, chovají se tak jak jsem je nastavil, mění se na mobily... fadují po 30 sekundách.

---------- Příspěvek doplněn 05.02.2018 v 14:20 ----------

Proč to tady jde ? Obrázek má v průzkumníku něco kolem 1280 a celý se zobrazí na stránce, né jen půl hlavy...

https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

---------- Příspěvek doplněn 05.02.2018 v 14:21 ----------

Napsal mjerabek;1442127
Protože výška obrázku není 395, ale třeba 1000 (podle velikosti okna), tak šířka obrázku je 4860 a proto se roztahuje i na dva monitory.
V zásadě máte dvě možnosti:
background-size: contain;, což způsobí to, že se obrázek přizpůsobí velikosti okna, takže výška bude moc malá.
background-size: 100% 100%;, což se vám roztáhne přes celé okno při jakékoliv velikosti, ale obrázek ztratí původní poměr stran.

Proč to tady jde ? Obrázek má v průzkumníku něco kolem 1280 a celý se zobrazí na stránce, né jen půl hlavy...

404 - Page not found

5. 2. 2018 14:12:39

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327859

Michal Jeřábek

5. 2. 2018 14:26:44

Protože to "náhodou" vychází. Já mám 2 monitory se šířkou 2560 a když si roztáhnu prohlížeč přes oba dva, tak tam jenom půlku hlavy mám. Ostatně si to můžete nasimulovat tak, že nastavíte výšku prohlížeče třeba na polovinu (jaká je skutečná velikost obrázku je v zásadě irelevantní, protože je tam background-size: cover;).

5. 2. 2018 14:26:44

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327858

Petr Gargulák

(12 hodnocení)

5. 2. 2018 14:29:24

Napsal mjerabek;1442134
Protože to "náhodou" vychází. Já mám 2 monitory se šířkou 2560 a když si roztáhnu prohlížeč přes oba dva, tak tam jenom půlku hlavy mám. Ostatně si to můžete nasimulovat tak, že nastavíte výšku prohlížeče třeba na polovinu.

Takže je to součást paralax exektu jinak to nejde ?, roztahuje se na ty 4 tisíce... já chci, aby se roztáhl na 1920 tedy původní velikost a , aby scroloval..paralax efekt.

5. 2. 2018 14:29:24

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327857

Michal Jeřábek

5. 2. 2018 14:32:25

Ano, tak, jak to je, to prostě být "musí". Jde to udělat pomocí background-size: 100% 100%;, ale nebude to pěkné (nedělejte to, prosím :).

---------- Příspěvek doplněn 05.02.2018 v 14:36 ----------

Nebo samozřejmě ještě můžete ten obrázek oříznout tak, aby měl nějaký běžný poměr stran jako má okno prohlížeče, a pak se to ořízne jen trochu, ale ty uvozovky budete muset stejně vyřešit jinak, protože vám nebudou držet na místě.

5. 2. 2018 14:32:25

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/paralax-image-crop-image/#reply1327856