Autor Zpráva
wondrajs
Profil
Zdravím,
potřeboval bych poradit. Mám obrázek na pozadí 1600x1200 a potřeboval bych ho na každé obrazovce s jakýmkoliv rozlišení mít od kraje ke kraji. myslím tím, že ho nechci dávat na tvrdo v pixelech a kolem mít třeba bílý, potřebuji, aby se to na jakémkoliv monitoru vždy upravilo podle rozlišení.

Velice děkuji za odpověď
pharaon.jh
Profil
wondrajs:
nastavit šířku a výšku na 100%
wondrajs
Profil
to se ale bude dole rolovat. Chtěl bych, aby se to vždy upravilo podle rozlišení obrazovky, aby to bylo od kraje ke kraji, stejně jako tady třeba.

Díky
Joker
Profil
wondrajs:
V moderních prohlížečích na to je CSS vlastnost background-size a hodnota cover nebo contain.
Rozdíl mezi nimi je v případě, kdy obrázek má jiný poměr stran, než prvek, takže se obrázek škáluje buď aby pokryl celou plochu, ale v jednom směru se ho část musí oříznout, nebo aby se vešel celý, ale v tom druhém směru zůstanou na krajích pruhy (nepokryje celou plochu).
Hodnota cover udělá to první, hodnota contain to druhé.

Ve starých prohlížečích (IE8 a starší) to nefunguje.
wondrajs
Profil
neexistuje na to nějáký flash nebo něco, co by si to upravovalo podle rozlišení obrazovky. jedná se mi hlavně na šířku.

děkuji
Str4wberry
Profil
Pokud jde jenom o šířku, tak můžete obrázek absolutně naposicovat a dát mu width: 100%.

Živá ukázka

Či použít ten background-size, jak radí Joker.

Živá ukázka
Corwin
Profil
wondrajs:

proboha jen né flash :-) JavaScript umí spočítat rozměry viditelného okna, obrázku pak můžeš nastavit jeden nebo oba rozměry podle hodnot, které získáš. ale je to zbytečné. mluvíš o obrázku na pozadí, takže použij zmiňované background-size, jak ti tu každý radí.

další přiklady:

background-size:100% auto; // šířka vyplní okno, výška se přizpůsobí dle poměru.
background-size:100% 100%; // oba rozměry se přizpůsobí oknu, obrázek se deformuje
background-size:auto 100%; // výška bude 100%, šířka se poměrově přizpůsobí.
jefitto44
Profil
Môžeš napr. vytvoriť obrázok široký na 1980px (fullHD) a dať mu background-attachment:fixed, čo zabezpečí, že sa pozadie nebude rolovať a vždy bude na celú obrazovku

background-position:center top; čím zabezpečíš, že vždy bude vidieť hlavnú strednú časť pozadia


PS: Len dúfam, že nejde o textúru, to by si nás pekne nasral všetkých
Joker
Profil
jefitto44:
To ale problém neřeší, lidi s rozlišením nad full HD pořád nebudou mít obrázek přes celou obrazovku (totéž když třeba stránku zmenším přes zoom).

Samozřejmě se zmenší počet uživatelů, kterým to bude nastávat, ale má to i negativa.
Jednak větší obrázek má i větší datovou velikost a bude déle trvat načtení, jednak nastane přesně opačný problém: Lidi s malým rozlišením budou mít podstatné části obrázku úříznuté. Což podle situace někdy může začít vadit.

Například na asi nejběžnější šířce 1280 px je z obrázku širokého 1600 px pořád vidět 80 % šířky, z obrázku širokého 1920 px už jen 2/3.
wondrajs
Profil
zdravím,
nejde mi jen o obrázku na pozadí, ale o celou tu stránku, menu, veškeré další obrázky, texty atd. Prostě aby se celá stránka zmenšovala/zvětšovala podle rozlišení obrazovky. Dát něco do hlavičky nebo tak, nevíte někdo?
pharaon.jh
Profil
wondrajs:
tak přidej do css toto
.stred{
width:100%;
margin: 0 auto;
padding:0px;
}
v kódu to bude vypadat takto
<body>
<div class="stred">

zde bude obsah celý stránky
</div>
</body>
Bubák
Profil
pharaon.jh:
tak přidej do css toto
Co to má dělat? Pokud to smažu, tak stránka vypadá úplně stejně.
http://kod.djpw.cz/nkjb
http://kod.djpw.cz/okjb
http://kod.djpw.cz/pkjb
wondrajs
Profil
Bubák:
potřebuji, abych měl na pozadí obrázek a na něm buttony, které budou mít odkazy. tohle zvládnu, ale potřebuji, aby se to všechno zvětšovalo nebo zmenšlovalo podle rozlišení obrazovky visitora.

Děkuji moc


spíš mi jde, aby se automaticky měnila velikost u těch buttonů a tak.
tiso
Profil
wondrajs: videl si to niekde? Ak hej, napíš link.
wondrajs
Profil
tiso:
pokusim se to vysvětlit. Mám obrázek 1600x1200, který už jsem díky background-size dokázal udělat tak, aby se mi zmenšoval či zvětšoval. Pod tímto obrázek mám obrázek 1200x800, tudíž je menší na šířku o 25%, a ten potřebuju, aby se taky podle rozlišení změnšoval/zvětšoval, když mu dám pevně width 1200px, tak se mi nezmenší. třeba na tabletu se ten 1600 dá od kraje ke kraji, ale ten 1200 je delší. Potřeboval bych, aby se to v tom poměru zmenšovalo a zvětšovalo při jakémkoliv rozlišení.

Moc děkuji
yFang
Profil
wondrajs:
Tak proč ten druhý taky nenastavíš v procentech?
wondrajs
Profil
yFang:
když nastavím šířku 100% a dám margin: 0 auto; tak se mi nehází na střed
yFang
Profil
wondrajs:
Když to má šířku 100 %, tak jak to nemůže být na středu? Nejlepší bude, když sem dáš živou ukázku toho, co máš udělané, takhle se můžeme jen dohadovat.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0