Ajustarea dimensiunii imaginii pentru rezoluția ecranului
Toate site-urile de pe aspectul aspectul paginii pot fi împărțite în trei grupe de bază: rigid fix (rigid fix). cauciuc adaptiv (fluid Adaptabil) și dispuneri extensibile elastice (expandabil elastice).
În acest subiect, ia în considerare opțiunile pentru ajustarea elementelor de capace de design - și anume, imagini, machete site-uri sub cauciuc.
Acest lucru se face, de obicei, în trei moduri principale:
* Capace impuneri, nu există zone fixe de fundal.
* Schimbarea imaginii poziționate - în diferite moduri.
* Schimbarea tot felul de elemente, prin adăugarea în mod dinamic / schimbare stiluri.
Capace Impunerea, fără zone fixe de fundal.
Cele mai frecvente și cross-browser, este un tip de construcție:
și de fond - în mijloc.
.
Pentru un tabel, în acest caz, modelul prescris, iar lățimea este un procent - de obicei, de 100%.
Lățimea celulelor din tabel, în care vor fi plasate elementele grafice, de obicei prescrise în pixeli, dar cel puțin una din celulele din tabel trebuie să aibă o lățime liberă (auto).
Aceasta este, în cazul în care două celule, ca în acest caz, o sumă prescrisă fixă, egală cu lățimea imaginii, al doilea set la «Auto» - adică, pentru restul lățimii.
poze Sami pot introduce în celula lor desemnate ca o imagine (etichetă
În acest caz, imaginea de fundal inserat, deoarece celula din stânga conține deja bloc de text - drepturile de autor, iar partea dreaptă presupune prezența sa.
Este simplu - uita-te la un exemplu:
Dar nu fiecare capac poate fi tăiat în acest fel, și aici au început să aibă unele dificultăți.
Luați în considerare opțiunile pentru a le rezolva în continuare.
Modificarea parametrilor imaginilor poziționate
Scalarea în raport cu elementul de bază.
În acest caz - tabel.
Vreau doar să rețineți că, în Internet Explorer, o mică problemă cu schimbarea în dimensiune a obiectului - în acest caz - imaginea.
Esența ei este după cum urmează:
Dacă vă imaginați lățimea reală este, de exemplu 1024px, și este necesar ca atunci când schimbați lățimea ferestrei browser-ului este imaginea este întinsă / redus proporțional, atunci îngustarea lățimea ferestrei browser-ului a imaginii la un anumit punct este „blocat“ și nu sa redus în continuare. Ca urmare, este dincolo de conținutul dorit.
Adică, imaginea nu este îngustat mai mică decât dimensiunea lor reală.
Gestionează acest „bug“ este destul de simplu și este doar o linie de cod CSS - în proprietate «masă aspect: fix», care urmează să fie aplicat tabelului, care a intrat în imagine.
Prin urmare, dacă vă imaginați pălării, evident, lățimea minimă mai mare a site-ului, trebuie să setați acest tabel parametru.
Acesta este stabilit prin stiluri (CSS) și are un total de două argumente: «auto» și «fix».
În plus:
Dacă imaginea nu este specificată înălțimea, sau setat la «Auto» - imaginea este scalată proporțional (păstrând raportul de aspect).
În cazul în care înălțimea specifică menționat (pozitivă în toate unitățile). raportul de aspect este perturbată, iar imaginea este scalată doar largă, menținând în același timp o înălțime predeterminată.
? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „>
CSS-stiluri (imaginea este scalată proporțional)
.
în cazul în care:
document.body.className - tag set
window.onresize = setScreenClass; - funcția de repetare la redimensionarea ferestrei.
.
EXEMPLU ☑.
.
Notă:
Codul de program, care se aplică JavaScrpt. caractere speciale trebuie să fie scăpat.
Simbolul se numește „specială“. în cazul în care poartă o semnificație suplimentară.
Ecranarea - înlocuirea textului de caractere speciale utilizate în înlocuirea de text corespunzătoare.
În interiorul rândurilor este efectuată cu ajutorul „# 92 simboluri; „- backslash, care spune interpretul că următorul caracter ar trebui să fie percepută ca un caracter normal și nu ca un operator / caracter special.
În acest caz, simbolul „# 92; "Poate să se apere, adică, de a obține o combinație de backslash" # 92, # 92; “.
Aș dori să ating un subiect încă, ca imagine de fundal a paginii, și modifica dinamic setările sale, în funcție de rezoluția ecranului utilizatorului.
Și anume:
* Image ar trebui să umple complet fundalul paginii, indiferent de rezoluția ecranului;
* Ar trebui. este posibil să se mențină raportul de aspect (aspect ratio); (Mai târziu, va fi clar de ce este scris „posibil“)
* Imaginea nu va duce la defilare (bare de defilare);
.
Schimbarea fundalului paginii prin proprietăți CSS3 «background-size»
Așa cum am menționat mai sus, odată cu apariția CSS3. și anume proprietățile «background-size». face destul de simplu.
Permiteți-mi să vă reamintesc: proprietatea «background-size» susținută de browsere majore moderne - Internet Explorer 9. Firefox 4+. Opera 9.5 +. Safari 5+. Chrome 4+. Konqueror 3.5.4 +.
HTML code:
- Nu este necesar, deoarece lucrăm numai cu tag-ul
- în cazul în care - uita-te la codul sursă.
.
în cazul în care:
html, body - Asking «html» și «corp» fundal de culoare - transparent - astfel încât strălucea de imagine.
html - Solicitarea de fundal imagine HTML, remedia problema în centru, interzice repetate.
html - atribuie proprietăți CSS3 background-size valoare «acoperire» - pentru a scala imaginea menținând în același timp proporțiile de dimensiune maximă (lățime sau înălțime - care mai mult) unitate - în acest cod HTML.
Acum, funcționează în IE. inclusiv a șasea versiune.
.
Schimbarea pagina de fundal de imagini poziționate.
Mai multe destul mod ușor de a stabili și întinde fundal, în funcție de dimensiunea monitorului este după cum urmează: - pentru conținut este închis de imagine este fixată în colțul din stânga sus, și este setat lățimea minimă și înălțimea de 100% - menținând astfel proporționalitatea la redimensionarea.
De asemenea, se adaugă latime min-lățime a imaginii, astfel încât imaginea nu va fi niciodată mai puțin de dimensiunea sa reală.
Așa că nu a fost în prim-plan, imaginea în sine și învelișul blocului deplasat de axa Z a fundalului (z-index: -1).
De asemenea, utilizarea @media ecran și (max-width: 1024px). care reglează poziția imaginii dacă fereastra browser-ului este mai mică decât imaginea, folosind o combinație de procent din valoarea poziției stânga și câmpul din stânga negativ.
? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „>
- Adăugat după conținutul înainte de închidere .
EXEMPLU ☑.
.
☑ Și un alt exemplu de cross-browser (trageți de colțul din stânga sus, ușor de offset).
.
Notă.
Trebuie să înțelegi. că scalarea mare a imaginii, fundalul staționar mai fix, a redus de performanță a browser-ului.
În plus. astfel încât să nu piardă de calitate pentru rezoluții de ecran mare, imaginea este mai bine să se folosească cu dimensiuni maxime, iar astfel de imagini pot cântări foarte mult.
Am vrut să știu dacă este posibil de a face optimizare site-ul de fundal pentru diferite monitoare, care ar fi, de exemplu, în cazul în care imaginea de fundal de 1600 x 1200 pixeli, nu arata ponosit de 1024-768, datorită faptului că există, și jumătate nu se potrivea, și să se adapteze la dorit dimensiunea ecranului, ca, de exemplu, apare pe desktop-uri noastre atunci când alegeți oboinu, ea se adaptează la dimensiunea dorită a ecranului, dar nu tunde, respingând tot ceea ce nu este inclus. Aș fi recunoscător pentru ajutor, dacă știe cineva.
Cum de a face acest lucru? Am citit aici (un exemplu de modul în care funcționează)