A kép a teljes elrendezés szélessége

Köztudott, hogy a szélessége a böngésző ablak változik viszonylag tág határok között, így podgadat alatt nem lehetséges. Állítsa kép teljes szélességében is csak abban az esetben, ha a fix elrendezés. A szélesség ebben az esetben egyértelműen meg van határozva, és egy rajzot a kívánt méretű meglehetősen egyszerű. Meg kell tenni, hogy mi nem beszélünk a szélessége egy weboldal, mint olyan, de csak körülbelül a szélessége az elrendezés, minden olyan információt, amely illeszkedik. Például, a helyszínen boeing.com alkalmazott ezt a megközelítést (ábra. 1), és a teljes szélessége a kép nem haladja meg egy előre meghatározott értéket.

Ábra. 1. A hazai boeing.com oldalon

A „gumi” elrendezés, ha szükséges, hogy egy képet a teljes szélességében a böngésző ablakot, függetlenül annak méretétől, módszereket alkalmaz, amelyek a továbbiakban részletesen ismertetjük.

Stretching a rajz 100%

Az első módszer az, hogy a címke érték beállított szélessége 100% (1. példa). A kép ebben az esetben kiterjed az egész tartály szélessége és magassága változatlan marad. Egyértelmű, hogy ez a szám elkerülhetetlenül a torzítás, így ezt a módszert ritkán használják, és nem az összes kép.

1. példa kép szélessége

Ebben a példában, a szélesség (szélesség) van beállítva, hogy 100% rajz, és a magasság (magasság) - 100 pixel.

Segítségével zökkenőmentes háttérkép

Először meg kell készítenie egy háttérképet, hogy olyannak kell lennie, hogy ha van, hogy két azonos képet, ezek olvadnak, és nincs észrevehető leletek között. Egy példa az ilyen kép ábrán látható. 2.

Ábra. 2. A képeket létrehozni háttérrel

A kép szélességét elég ahhoz, hogy 20-30 pixel.

Vigyázni kell, mert ezzel túl szűk szélessége egy ilyen kép, mint a 1-2 pixel, mivel ez csak akkor hozza kárt. A fájl mérete csökken kissé, és a böngésző kell, hogy elegendő idő, hogy teljesen „egyengetni” a kívánt területet. És ez lesz észrevehető.

háttér maga az érdeklődés csak részeként a végeredményt. Ez azt jelenti, hogy a háttérben a területen kell előírni egy másik képet, hogy együtt egységes egészet alkotnak. Ábra. A 3. ábra a képeket a jobb szélét, amely egybeesik a háttér mintázat. Ezért amikor ezt a mintát a háttérben, csak egybeesnek.

Ábra. 3. Kép ​​alkalmazandó háttér

Ez a kép kell igazítani a bal szélén a böngésző ablak jobb szélén összehangolja a mintázat hátterét. Ebben az esetben, és a kép és a háttér egy teljes képet. 2. példa azt mutatja, a létrehozását egy ilyen egység használata által a stílus tulajdonságok background.

2. példa: Háttérképét

Ebben a példában, a magassága a blokk használatával van megadva tulajdonságait magassága. egybeesik a magasságot, a rajz és a szélessége megegyezik az alapértelmezett auto. Más szóval, ez tölti ki a teljes rendelkezésre álló szélességet. Ismétlődő háttér csak akkor vízszintesen, ez biztosítja az értéke repeat-x háttér beállítást.

Használjon egy háttérképet nem mindig szükséges, néha ez elég alkalmas és egy színes töltse ki a téglalap alakú terület. Ahhoz, hogy tökéletesen pozícionálni a kép ezen a háttérben, az ábrán használt tonizáló (szépia, mivel ez is nevezik), vagy a gradiens átmeneti, ábrán látható. 4.

Ábra. 4. kép gradiens kell helyezni a színes háttér

A fényképek JPEG formátumú fájlok nem mindig alkalmasak a színes háttér az a tény, hogy ez a formátum torzítja a képet. Ily módon, a zökkenőmentes átmenetet a képet, hogy a háttérben nem lehet, mint látni fogjuk észrevehető varrás. Ebben az esetben jobb, ha használja a GIF formátumot.

Amikor egy monokróm háttér kódot kicsit módosulhat (3. példa). Ismételjük meg a háttérben már nincs szükség, így a háttér lehetőség van csak egy érték - a kívánt háttérszínt.

3. példa: háttérszíne

Ebben a példában, mi meg a paraméterei - a magassága és színe, valamint a jellemzői a fejléc. Az eredmény ábrán látható. 5.

Ábra. 5. A kombináció a háttér színek és mintázat

Háttérkép nagy szélességű

A korábbi módszerrel, bár gyakran használják elég ad elég a megfelelő eredmény még mindig nem hoz létre egy mintát teljes szélességében az elrendezés. Ennek elérése érdekében a következő algoritmust használjuk. Kezdetben elkészített kép szélessége elég nagy (a pixel 1000-1200), ami után van elhelyezve, mint a háttér mintázat az adott réteg.

Ábra. 6. A háttérkép a böngésző ablakban

4. példa azt mutatja, hogyan kell megszerezni hasonló eredményt. Ez ismét alkalmazni tulajdonság háttérben. mint az értéke határozza meg: a háttér színe, akkor jelenik meg, míg a kép nincs betöltve; az elérési utat a háttérképet és annak beállításait. Tehát jobb felső érték azt jelenti, hogy a jobb szélén a kép rögzítésre kerül, és ha változtatni a szélessége a böngészőablak jelenik balra egy láthatatlan része a képnek. Ha eltávolítjuk ezt az érvelést, a bal szélén fogja meghatározni az alapértelmezett.

4. példa ábra a teljes szélessége a oldal