Cum să întindeți o imagine la html ecran complet. Întinderea fundalului unei imagini menținând proporțiile unui anumit obiect. O soluție minunată, simplă și progresivă folosind CSS3

Salutari. În acest articol, vreau să împărtășesc trei moduri de a plasa o imagine ca fundal al unei pagini întregi folosind doar HTML + CSS (fără JS).

Deci, cerințele noastre pentru imaginea de fundal sunt următoarele:

Acoperă 100% din lățimea și înălțimea paginii
Fundalul este scalat dacă este necesar (fondul este întins sau comprimat în funcție de dimensiunea ecranului)
Raportul de aspect al imaginii este păstrat
Imaginea este centrată pe pagină
Fundalul nu provoacă derulare
Soluția este cât se poate de compatibilă între browsere
Nu sunt utilizate alte tehnologii decât CSS

Metoda 1

Dupa parerea mea asta este Cel mai bun mod, pentru că este cel mai simplu, mai concis și modern. Folosește proprietatea CSS3 background-size, pe care o aplicăm etichetă html. Este html, și nu body, pentru că înălțimea sa este mai mare sau egală cu înălțimea ferestrei browserului.

Setați fundalul să fie fixat și centrat, apoi ajustați dimensiunea utilizând background-size: cover .

Html ( imagine de fundal: url(images/background.jpg); background-repeat: nu-repeat; fundal-poziție: centru centru; fundal-atașament: fix; -webkit-background-size: coperta; -moz-background- dimensiune: coperta; -o-background-size: coperta; dimensiune fundal: coperta; )

Această metodă funcționează în

Chrome (orice versiune) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Pentru a vă asigura că imaginile se încarcă rapid, găzduiți site-urile dvs. numai la furnizori de găzduire de încredere, cum ar fi Utilizatori și motoare de căutare iubesc site-urile rapide. Metoda 2 Această metodă implică utilizarea unui element img, a cărui dimensiune se va modifica în funcție de dimensiunea ferestrei browserului. Pentru a întinde o imagine pentru a umple întregul ecran, trebuie să-și seteze înălțimea și lățimea minimă la 100%. Și pentru ca imaginea să nu fie comprimată la o dimensiune mai mică decât cea originală, setați lățimea minimă cu o valoare egală cu lățimea imaginii.

Dacă lățimea ferestrei este mai mică decât lățimea imaginii, va fi folosită o interogare media pentru a centra fundalul.

img.background ( înălțime minimă: 100%; lățime minimă: 640px; lățime: 100%; înălțime: automat; poziție: fix; sus: 0; stânga: 0; /* Depinde de dimensiunea imaginii */ @media ecran și (lățime maximă: 640 px)( img.bg ( stânga: 50%; margine-stânga: -320px; ) ) )

Această metodă funcționează în:

Orice versiune de browsere bune (Chrome, Opera, Firefox, Safari)
IE 9+

Metoda 3

O altă modalitate este următoarea: remediați imaginea în colțul din stânga sus al paginii și întindeți-o folosind proprietățile min-ltime și min-height de 100%, păstrând în același timp raportul de aspect.

Adevărat, cu această abordare imaginea nu este centrată. Dar această problemă este rezolvată prin împachetarea imaginii în , pe care o facem de 2 ori mai mare decât fereastra. Și întindem imaginea în sine și o plasăm în centru.

div.background ( poziție: fix; sus: -50%; stânga: -50%; lățime: 200%; înălțime: 200%; ) img ( poziție: absolut; sus: 0; stânga: 0; dreapta: 0; jos : 0; marjă: automată; lățime minimă: 50%; înălțime minimă: 50%; )

Această metodă funcționează în browsere buneși IE 8+.

Sper că aceste informații vă vor fi de folos. Personal, folosesc adesea aceste metode, mai ales prima. Probabil că există și alte modalități de a plasa o imagine fundalul folosind CSS. Dacă știți despre ele, vă rugăm să le împărtășiți în comentarii.

Aici o vom analiza cât mai detaliat posibil. Cum puteți implementa un fundal pentru o resursă de internet care ar trebui să acopere întreg spațiul de lucru? Practic, totul se face în CSS3, puteți conecta, de asemenea, jQuery și chiar PHP, dar să ne uităm la o opțiune care folosește CSS pur. Mai întâi trebuie să înțelegeți sau să determinați ce ar trebui să se întâmple. Aceasta este, desigur, o umplere completă a ferestrei cu un fundal sau o imagine, astfel încât să nu existe goluri.

Unde vom întinde imaginea astfel încât să arate corect, deoarece dacă fundalul este sub o singură nuanță de culoare, este mai ușor să lucrezi cu ea. Nu uitați să potriviți imaginea cu proporțiile sale. Și ar trebui să se dovedească cu siguranță că imaginea este centrată. Principalul lucru este că totul ar trebui să fie cât mai compatibil cu browserele încrucișate și de înțeles, fără diverse șmecherii cu flash-ul.

Metoda de fundal CSS3 Aceasta este cea mai comună metodă care poate extinde fundalul pe CSS pur și totul datorită unei proprietăți numite dimensiunea fundalului, care va fi prezent doar în CSS3.

Aici vom crea inițial un fundal fix și îl vom seta în centru, astfel încât tot ce rămâne este să-l întindem, unde conectăm proprietățile de dimensiunea fundalului, toate acestea merg sub referința de fundal.

În general, ne concentrăm pe blocul căruia îi atribuim stiluri și adăugăm următorul cod în fișierul de stil pentru acest bloc:

corp(
fundal: url(http://site/Aben/ABGDA/artunsa.png) nu-repeat centru sus fix;
-webkit-background-size: coperta;
-moz-background-size: coperta;
-o-background-size: coperta;
dimensiunea fundalului: coperta;
}

După cum puteți vedea, parametrul de fundal, unde adăugăm inițial calea către imagine, unde poziția imaginii este setată pentru a se potrivi cu fereastra ecranului. Dacă te uiți la el, valorile centrului și vârfului sunt responsabile pentru centru și apăsarea pe toate părțile, astfel încât să nu existe spații. Pentru a fi clar, valoarea fixată este responsabilă pentru funcția de fixare.

Metoda este destul de obișnuită, pe care o folosesc tot timpul și mi se potrivește 100% la sută.

Altă cale:

O altă metodă comună este să inserați o imagine pe pagină. Acesta va avea o pozitie fixa si va fi amplasat in coltul din stanga sus. Îi vom da o lățime minimă și o înălțime minimă de 100%. De asemenea, este necesar să pregătiți imaginea în prealabil, pentru a asigura proporționalitatea laturilor.

#site-ul web (
poziție:fixă;
sus:0;
stânga:0;
lățime minimă: 100%;
înălțime minimă: 100%;
}

Aici puteți vedea că acest cod nu centrează imaginea de fundal, că puteți face rapid totul după cum este necesar, sau mai degrabă, reparați imaginea luând-o într-un div.

.jpg" alt="">

CSS

#site-ul web (
poziție:fixă;
sus:-50%;
stânga:-50%;
latime:200%;
inaltime:200%;
}
#site img (
poziție: absolut;
sus:0;
stânga:0;
dreapta:0;
jos:0;
margin:auto;
lățime min: 50%;
înălțime minimă: 50%;
}

Asta e tot, nu toate metodele sunt prezentate aici, ci cele care fac cea mai mare diferență.

De asemenea, un scurt videoclip în care totul este explicat clar despre cum să întindeți fundalul pentru a umple întregul ecran folosind CSS.

PS - dacă aveți propria experiență, deși totul ar trebui să fie la fel aici. atunci vă rugăm să împărtășiți cu ei în comentarii.

O zi bună, iubitori de site-uri și iubitori de web. Astăzi vreau să dau un răspuns la o întrebare frecvent adresată nu numai de începători, ci uneori și de dezvoltatori: „Cum să se întindă poza css pe ecran complet?" De fapt, această tehnică este foarte ușor de implementat, dar ideea aici este diferită.

Astăzi, există multe metode și limbaje de programare, datorită cărora o imagine poate fi plasată pe întregul ecran. Prin urmare, în această publicație voi vorbi despre mai multe moduri de a crea o imagine de fundal la dimensiune completă când ajutor css, css3, jquery și php. Sa trecem la treaba!

Metoda 1. Imagine de fundal adaptivă folosind instrumente CSS

Pentru a face imagine de fundal adaptiv; foile de stil în cascadă au o proprietate de dimensiune de fundal. Vă permite să setați dimensiunea fisier graficîn raport cu dimensiunea deschide fila.

Pentru a face acest lucru, trebuie doar să scrieți această linie:

dimensiunea fundalului: 100% automat

Primul parametru, adică 100% este responsabil pentru întinderea imaginii pe orizontală, al doilea parametru – pe verticală. Acum să trecem la un exemplu.

Exemplu cu corp css ( fundal: url(http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg) fără repetare centru sus fix; -moz-background-size: 100% automat; -webkit- dimensiunea fundalului: 100% automat; -o-dimensiunea fundalului: 100% automat; dimensiunea fundalului: 100% automat; culoare:#191970; ) div ( fundal: #6495ED; lățime: 86%; marjă: 14% 4 % 4% 4%; umplutură: 35px; ) h1 (culoare: #191970; text-shadow: 3px 2px 1px #fff; )

Această metodă este acceptată de browserele începând cu versiunea 10, versiunea 3 a Safari, Firefox 3.6 și versiunea 9 a IE.

Metoda 2. Fundal cauciuc folosind css3

Odată cu lansarea în lume a specificației css3, s-au adăugat multe la limbaj instrumente convenabile. Deci, pentru a crea un fundal întins sub forma unei imagini, se folosește aceeași proprietate ca în capitolul anterior, dar dimensiunea imaginii este specificată nu prin procente, ci prin cuvântul special cover: background-size: cover. Foarte convenabil, nu-i așa?

Pentru a vedea cum funcționează această proprietate, rulați exemplul anterior, modificând parametrii de dimensiune de fundal la 100% și automat pentru a acoperi .

jQuery în sine este foarte convenabil. Face mai ușor să lucrați cu API-ul, mai ușor să accesați diferite elemente de cod și, de asemenea, mai ușor să implementați unele lucruri.

Pentru ca acesta să funcționeze în exemplu aceasta metoda, mai întâi trebuie să conectați scriptul js cu această linie:

Mai jos am atașat exemplul de cod cu implementarea jQuery deja inserată în el.

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

Exemplu jQuery< aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); });

Planetariu în zonă deschisă!

Experimentați stele îndepărtate, planete și cratere lunare...

Exemplu cu jQuery body ( background-size: cover; color:#191970; ) div ( background: #6495ED; width: 86%; margin: 14% 4% 4% 4%; padding: 35px; ) h1 (culoare: # 191970; text-shadow: 3px 2px 1px #fff; ) #b-g ( sus: 0; stânga: 0; z-index:-1; poziție: fix; ) .b-g-w ( lățime: 100%; ) .b-g-h ( înălțime: 100%; ) $(window).load(function() ( var wind = $(window), $b-g = $("#b-g"), aspectRatio = $b-g.width() / $b-g.height(); funcția 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"); }); Planetariu în zonă deschisă!

Experimentați stele îndepărtate, planete și cratere lunare...

Această metodă este universală și este acceptată de multe browsere chiar și atunci când instrumentele CSS nu funcționează.

Metoda 4. Implementarea PHP a unei imagini întinse pentru a umple întregul ecran

Câteva cuvinte despre limba în sine. PHP este denumit în mod obișnuit un limbaj de scripting. Cu ajutorul ei scriu partea de server aplicații web, de ex. conectați serviciul la baza de date, procesați cererile etc. Eu insumi cod php este încorporat în html și interacționează cu acesta în mod flexibil.

Pentru a introduce o bucată de cod, trebuie să scrieți textul între paranteze astfel:

Acum trebuie să inserați doar câteva rânduri în exemplul original:

1 2 3 4 5

Sarcină

Întindeți imaginea de fundal la toată lățimea ferestrei browser folosind CSS3.

Soluţie

Pentru a scala fundalul, utilizați proprietatea background-size; setați valoarea acesteia la 100%, apoi fundalul va ocupa întreaga lățime a ferestrei browserului. Pentru versiunile mai vechi de browsere, ar trebui să utilizați proprietăți specifice cu prefixe, așa cum se arată în exemplul 1.

Exemplul 1: fundal extensibil

HTML5 CSS 2.1 IE Cr Op Sa Fx

Corp de fundal extensibil ( fundal: url(images/sun2.png) no-repeat; -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ și Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Browsere moderne */ )

Rezultat acest exemplu prezentat în Fig. 1.

Orez. 1. Vedere a fundalului cu o dimensiune redusă a ferestrei

Pe măsură ce dimensiunea ferestrei browserului crește, fundalul va începe și el să se extindă, ceea ce va duce la o deteriorare a aspectului imaginii (Fig. 2).

Orez. 2. Vedere a fundalului cu dimensiunea ferestrei mărite

Am găsit această lecție pe unul Canalul canalului YouTube. O caracteristică foarte utilă pentru un web designer, în opinia mea.

Uneori latime imaginea originală nu este suficient pentru orice idee de design, iar întinderea acesteia pe lățime deformează obiectele dorite. Pentru a menține aceste obiecte intacte în timp ce întindeți în continuare fundalul imaginii, PhotoShop ne pune la dispoziție anumite instrumente. Și așa, până la urmă avem din imaginea originală:

Ar trebui să arate așa:

Să începem. Deschideți imaginea noastră în PhotoShop și selectați obiectul de care avem nevoie:

Apoi, accesați fila Selecție >> Salvați zona selectată

Și setați un nume arbitrar pentru această selecție:

Astfel, am creat o zonă care va fi protejată ulterior de schimbări. Următorul pas este să mergeți la Editare >> Scala bazată pe conținut:

Și asigurați-vă că indicați obiectul protejat:

Toate. Tot ce rămâne este să modificați lățimea imaginii folosind unelte standard(fie în panoul de sus prin modificarea procentului de lățime sau pur și simplu trăgând imaginea). Este important înainte de aceasta (sau chiar în stadiul inițial) să schimbați dimensiunea pânzei, astfel încât limitele imaginii să nu depășească zona de vizibilitate a acesteia.