Hogyan nyújthatunk képet teljes képernyős html-re. A kép hátterének nyújtása egy adott objektum arányainak megtartása mellett. Csodálatos, egyszerű és progresszív megoldás a CSS3 használatával

Üdvözlet. Ebben a cikkben három módszert szeretnék megosztani, hogyan helyezhet el egy képet egy teljes oldal háttereként, pusztán HTML + CSS használatával (JS nélkül).

Tehát a háttérképre vonatkozó követelményeink a következők:

• Az oldal szélességének és magasságának 100%-át lefedi
• A hátteret szükség esetén méretezzük (a hátteret a képernyő méretétől függően megnyújtjuk vagy tömörítjük)
• A kép képaránya megmarad
• A kép az oldal közepén van
• A háttér nem okoz görgetést
• A megoldás a lehető legnagyobb mértékben kompatibilis több böngészővel
• A CSS-n kívül más technológiát nem használnak

1. módszer

Véleményem szerint ez A legjobb mód, mert ez a legegyszerűbb, legtömörebb és modern. A CSS3 background-size tulajdonságot használja, amelyre alkalmazzuk html tag. Ez html, és nem test, mert magassága nagyobb vagy egyenlő, mint a böngészőablak magassága.

Állítsa be a hátteret rögzítésre és középre, majd állítsa be a méretét a background-size: cover segítségével.

Html ( background-image: url(images/background.jpg); háttér-ismétlés: nincs ismétlés; háttér-pozíció: középen; háttér-csatolás: rögzített; -webkit-háttér-méret: borító; -moz-háttér- méret: borító; -o-background-size: borító; háttér-méret: borító; )

Ez a módszer működik

Chrome (bármilyen verzió) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

A képek gyors betöltése érdekében webhelyeit csak megbízható tárhelyszolgáltatóknál tárolja, mint például a Felhasználók és a kereső motorok szeretem a gyors oldalakat. 2. módszer Ez a módszer egy img elem használatát foglalja magában, amelynek mérete a böngészőablak méretétől függően változik. Ahhoz, hogy egy képet úgy nyújtson, hogy kitöltse a teljes képernyőt, a minimális magasságot és szélességet 100%-ra kell állítani. És hogy a kép ne legyen tömörítve az eredetinél kisebb méretre, állítsa be a minimális szélességet a kép szélességével megegyező értékkel.

Ha az ablak szélessége kisebb, mint a kép szélessége, egy médialekérdezés segítségével középre igazítja a hátteret.

img.background ( min-magasság: 100%; min-szélesség: 640 képpont; szélesség: 100%; magasság: automatikus; pozíció: rögzített; felül: 0; bal: 0; /* A kép méretétől függ */ @média képernyő és (max. szélesség: 640 képpont)( img.bg (bal: 50%; margó bal: -320px; ) ))

Ez a módszer a következőkben működik:

• A jó böngészők bármely verziója (Chrome, Opera, Firefox, Safari)
• IE 9+

3. módszer

Egy másik módszer a következő: javítsa ki a képet az oldal bal felső sarkába, és nyújtsa ki a 100%-os min-width és min-height tulajdonságok használatával, miközben megtartja a képarányt.

Igaz, ezzel a megközelítéssel a kép nem középre áll. De ezt a problémát úgy oldjuk meg, hogy becsomagoljuk a képet, amit az ablak 2-szeresére készítünk. És magát a képet nyújtjuk, és középre helyezzük.

div.background ( pozíció: rögzített; felül: -50%; bal: -50%; szélesség: 200%; magasság: 200%; ) img ( pozíció: abszolút; felül: 0; bal: 0; jobb: 0; lent : 0; margó: automatikus; minimális szélesség: 50%; min magasság: 50%; )

Ez a módszer működik jó böngészőkés IE 8+.

Remélem, ez az információ hasznos lesz az Ön számára. Személy szerint gyakran használom ezeket a módszereket, különösen az elsőt. Valószínűleg vannak más módok is a kép elhelyezésére a háttér CSS használatával. Ha tudsz róluk, kérlek oszd meg őket kommentben.

Itt a lehető legrészletesebben elemezzük. Hogyan valósíthat meg egy olyan internetes erőforrás hátterét, amelynek le kell fednie a teljes munkaterületet? Alapvetően minden CSS3-ban történik, jQuery-t és még PHP-t is csatlakoztathatunk, de nézzünk meg egy lehetőséget, amely tiszta CSS. Először meg kell értened vagy meg kell határoznod, hogy mi történjen. Ez természetesen az ablak teljes kitöltése háttérrel vagy képpel, hogy ne legyenek rések.

Hol feszítjük ki a képet, hogy helyesen nézzen ki, hiszen ha a háttér egy színárnyalat alatt van, akkor könnyebb vele dolgozni. Ne feledkezzünk meg a kép arányaihoz igazításáról. És mindenképpen ki kell derülnie, hogy a kép középen van. A lényeg az, hogy minden a lehető legböngészőközi kompatibilis és érthető legyen, mindenféle vakuzás nélkül.

CSS3 háttérmetódus Ez a legelterjedtebb módszer, amivel meg lehet feszíteni a hátteret tiszta CSS-en, és mindezt egy tulajdonságnak, az ún. háttér méretű, amely csak a CSS3-ban lesz jelen.

Itt eleinte fix hátteret készítünk és középre állítjuk, így már csak a nyújtás marad, ahol a háttérméret tulajdonságokat összekötjük, ez mind a háttérreferencia alá kerül.

Általában arra a blokkra összpontosítunk, amelyhez stílusokat rendelünk, és a következő kódot adjuk hozzá a blokk stílusfájljához:

test(
háttér: url(http://site/Aben/ABGDA/artunsa.png) ismétlés nélküli középső felső fix;
-webkit-háttér-méret: borító;
-moz-background-size: borító;
-o-background-size: borító;
háttér-méret: borító;
}

Mint látható, a háttér paraméter, ahol kezdetben hozzáadjuk a kép elérési útját, ahol a kép pozíciója a képernyő ablakának megfelelően van beállítva. Ha ránézünk, a center és a top értékei felelősek a középpontért és a minden oldalról történő préselésért, hogy ne legyen szóköz. Hogy világos legyen, a rögzített érték felelős a rögzítési funkcióért.

A módszer egészen hétköznapi, amit folyamatosan használok és 100%-ban megfelel nekem.

Egy másik módja:

Egy másik gyakori módszer a kép beszúrása az oldalra. Rögzített pozíciója lesz, és a bal felső sarokban lesz elhelyezve. 100%-os minimális szélességet és minimális magasságot adunk meg. Az oldalak arányosságának biztosítása érdekében a képet előzetesen is el kell készíteni.

#weboldal (
pozíció:fix;
felső:0;
bal:0;
min-szélesség:100%;
min-magasság:100%;
}

Itt láthatod, hogy ez a kód nem középre helyezi a háttérképet, gyorsan mindent megtehetsz, ahogy kell, vagy inkább javíthatod a képet úgy, hogy div-be szeded.

.jpg" alt="">

CSS

#weboldal (
pozíció:fix;
felső: -50%;
bal:-50%;
szélesség:200%;
magasság:200%;
}
#site img (
pozíció:abszolút;
felső:0;
bal:0;
jobbra:0;
alsó:0;
margó:auto;
min-szélesség:50%;
min-magasság:50%;
}

Ez minden, itt nem minden módszert mutatunk be, hanem azokat, amelyek a legtöbbet hoznak.

Szintén egy rövid videó, ahol minden világosan el van magyarázva, hogyan kell a hátteret úgy nyújtani, hogy CSS segítségével kitöltse a teljes képernyőt.

PS - ha van saját tapasztalata, bár itt mindennek ugyanúgy kell lennie. akkor kérjük, ossza meg velük a megjegyzésekben.

Jó napot, oldalépítő stréberek és webszeretők. Ma nem csak a kezdők, hanem néha a fejlesztők által gyakran feltett kérdésre szeretnék választ adni: „Hogyan nyújtsunk css kép teljes képernyőn?" Valójában ezt a technikát nagyon könnyű megvalósítani, de a lényeg itt más.

Ma már számos olyan módszer és programozási nyelv létezik, amelyeknek köszönhetően egy kép a teljes képernyőn elhelyezhető. Ezért ebben a kiadványban arról fogok beszélni, hogyan lehet teljes méretű háttérképet létrehozni, amikor css segítség, css3, jquery és php. Lássunk munkához!

1. módszer. Adaptív háttérkép készítése CSS-eszközökkel

Annak érdekében, hogy megtegye háttérkép adaptív; a lépcsőzetes stíluslapoknak háttérméret tulajdonságuk van. Lehetővé teszi a méret beállítását grafikus fájl dimenzióval kapcsolatban lap megnyitása.

Ehhez csak ezt a sort kell beírnia:

háttérméret: 100%-ban automatikus

Az első paraméter, pl. 100% felelős a kép vízszintes nyújtásáért, a második paraméter - függőlegesen. Most térjünk át egy példára.

Példa css törzstel (háttér: url(http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg) ismétlés nélküli középső felső fix; -moz-background-size: 100% auto; -webkit- háttér-méret: 100% auto; -o-background-size: 100% auto; háttér-méret: 100% auto; szín: #191970; ) div ( háttér: #6495ED; szélesség: 86%; margó: 14% 4 % 4% 4%; kitöltés: 35px; ) h1 (szín: #191970; szövegárnyék: 3px 2px 1px #fff; )

Ezt a módszert a 10-es, a Safari 3-as verziótól, a Firefox 3.6-tól és az IE 9-es verziójától kezdődő böngészők támogatják.

2. módszer. Gumi háttér css3 használatával

A css3 specifikáció világra bocsájtásával sok minden bővült a nyelvvel kényelmes eszközöket. Tehát a feszített háttér kép formájú létrehozásához ugyanazt a tulajdonságot használjuk, mint az előző fejezetben, de a kép méretét nem százalékok, hanem a speciális borító szó határozza meg: background-size: cover. Nagyon kényelmes, nem?

Hogy lásd, hogyan működik ezt az ingatlant, futtassa az előző példát, módosítsa a háttérméret paramétereit 100%-ra, és állítsa be az automatikus beállítást.

Maga a jQuery nagyon kényelmes. Könnyebbé teszi az API-val való munkát, könnyebben elérhető a különböző kódelemek, és néhány dolog megvalósítása is egyszerűbb.

Hogy működjön a példában ez a módszer, először össze kell kapcsolnia a js szkriptet ezzel a sorral:

Az alábbiakban csatoltam a példakódot, amelybe már be van illesztve a jQuery implementáció.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

jQuery példa< aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); Planetárium a szabadban! Tapasztalja meg a távoli csillagokat, bolygókat és holdkrátereket...

Példa jQuery törzstel (háttér mérete: borító; szín: #191970; ) div ( háttér: #6495ED; szélesség: 86%; margó: 14% 4% 4% 4%; kitöltés: 35px; ) h1 ( szín: # 191970; szövegárnyék: 3px 2px 1px #fff; ) #b-g ( fent: 0; balra: 0; z-index: -1; pozíció: rögzített; ) .b-g-w (szélesség: 100%; ) .b-g-h ( magasság: 100%; ) $(ablak).load(function() ( var wind = $(ablak), $b-g = $("#b-g"), aspectArtio = $b-g.width() / $b-g.height(); függvény resizeBg() ( if ((wind.width() / wind.height()))< aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); Planetárium a szabadban!

Tapasztalja meg a távoli csillagokat, bolygókat és holdkrátereket...

Ez a módszer univerzális, és sok böngésző támogatja még akkor is, ha a CSS-eszközök nem működnek.

4. módszer. A teljes képernyőt kifeszített kép Php megvalósítása

Néhány szó magáról a nyelvről. A PHP-t általában szkriptnyelvnek nevezik. Segítségével írnak szerver rész webes alkalmazások, pl. csatlakoztassa a szolgáltatást az adatbázishoz, feldolgozza a kéréseket stb. Magamat php kód be van ágyazva a html-be, és rugalmasan kommunikál vele.

Egy kódrészlet beszúrásához zárójelbe kell írnia a szöveget a következőképpen:

Most már csak néhány sort kell beszúrnia az eredeti példába:

1 2 3 4 5

Feladat

Nyújtsa ki a háttérképet a böngészőablak teljes szélességére a CSS3 használatával.

Megoldás

A háttér méretezéséhez használja a background-size tulajdonságot; állítsa az értékét 100%-ra, ekkor a háttér a böngészőablak teljes szélességét elfoglalja. A böngészők régebbi verzióinál speciális tulajdonságokat kell használnia előtagokkal, amint az az 1. példában látható.

1. példa: Nyújtható háttér

HTML5 CSS 2.1 IE Cr Op Sa Fx

Nyújtható háttértörzs ( háttér: url(images/sun2.png) no-repeat; -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ és Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Modern böngészők */ )

Eredmény ezt a példátábrán látható. 1.

Rizs. 1. Háttér nézet csökkentett ablakmérettel

A böngészőablak méretének növekedésével a háttér is tágulni kezd, ami a kép megjelenésének romlásához vezet (2. ábra).

Rizs. 2. Háttér nézet kinagyított ablakmérettel

Ezt a leckét az egyiken találtam youtube csatorna. Szerintem egy webdesigner számára nagyon hasznos funkció.

Néha szélesség eredeti kép nem elegendő egyetlen tervezési ötlethez sem, és a szélességben történő nyújtás torzítja a kívánt objektumokat. Annak érdekében, hogy ezek az objektumok érintetlenek maradjanak, miközben a kép hátterét továbbra is nyújtják, a PhotoShop bizonyos eszközöket biztosít számunkra. És így a végén az eredeti képről van szó:

Így kell kinéznie:

Kezdjük el. Nyissa meg képünket a PhotoShopban, és válassza ki a szükséges objektumot:

Ezután lépjen a Kijelölés lapra >> Kijelölt terület mentése

És adjon meg valami tetszőleges nevet ennek a kijelölésnek:

Így olyan területet hoztunk létre, amely a későbbiekben védett lesz a változásokkal szemben. A következő lépés a Szerkesztés >> Tartalomalapú skála menüpont:

És feltétlenül jelölje meg a védett objektumot:

Minden. Nincs más hátra, mint a kép szélességének megváltoztatása szabványos szerszámok(akár benne felső panel a szélesség százalékának módosításával vagy egyszerűen a kép húzásával). Fontos ez előtt (vagy a kezdeti szakaszban) a vászon méretének megváltoztatása, hogy a kép határai ne lépjék túl a láthatósági területet.